如何從分頁的UI網格獲取過濾的數據

Question

我希望在啓用分頁功能時從UI網格獲取過濾的數據。在一般情況下，我使用

$scope.gridApi.core.on.filterChanged($scope, function() { 

       if ($scope.gridApi.grid.columns[1].filter.term != "" && $scope.gridApi.grid.columns[1].filter.term != undefined) { 
        var dd =$scope.gridApi.core.getVisibleRows($scope.gridApi.grid); 
        console.log(dd); 
      }); 

但是，當啓用分頁時，代碼無法正常工作，它只返回第一頁的行。但我需要所有過濾的數據。

最簡單的解決方案是基於過濾條件過濾數據源，但它會顯着降低性能。

有什麼建議嗎？

Answer 1

注意：我沒有嘗試與分頁，只是分組，但希望它給你一個提示。


嘗試使用rowsVisibleChanged事件以及filterChanged事件。您必須使用兩者，因爲如果您單獨使用filterChanged事件，它將無法工作，因爲它在行實際過濾之前啓動。我使用一個標誌變量（filterChanged）來知道過濾器是否被修改。

然後，使用類似lodash來篩選有visible屬性設置爲true的$scope.gridApi.grid.rows：

// UI-Grid v.3.0.7 
var filterChanged = false; 

$scope.gridApi.core.on.filterChanged($scope, function() { 
    filterChanged = true; 
}); 

$scope.gridApi.core.on.rowsVisibleChanged($scope, function() { 
    if(!filterChanged){ 
     return; 
    } 
    filterChanged = false; 
    // The following line extracts the filtered rows 
    var filtered = _.filter($scope.gridApi.grid.rows, function(o) { return o.visible; }); 
    var entities = _.map(filtered, 'entity'); // Entities extracted from the GridRow array 
}); 

Answer 2

我能夠過濾後的數據在所有分頁通過uiGridExporterService服務出口。感謝@ Patricio上面的提示。

//you can set it to ALL or VISIBLE or SELECTED 
var columnsDownloadType = uiGridExporterConstants.ALL; 

//get all the visible rows across all paginations 
var filtered = _.filter(grid.api.grid.rows, function (o) { 
    return o.visible; 
}); 

//get the entities of each of the filtered rows 
var entities = _.map(filtered, 'entity'); 

//get all or visible column headers of this grid depending on the columnsDownloadType 
var exportColumnHeaders = grid.options.showHeader ? uiGridExporterService.getColumnHeaders(grid, columnsDownloadType) : []; 

var exportData = []; 
/**this lodash for-each loop will covert the grid data into below array of array format 
* [[{value:'row1col1value'},{value:'row1col2value'}],[{value:'row2col1value'},{value:'row2col2value'}].....] 
* uiGridExporterService.formatAsCsv expects it in this format 
**/ 
_.each(entities, function (row) { 
    var values = []; 
    _.each(exportColumnHeaders, function (column) { 
     var value = row[column.name]; 
     values.push({value: value}); 
    }); 
    exportData.push(values); 
}); 

//format the header,content in csv format 
var csvContent = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ','); 

//export as csv file 
uiGridExporterService.downloadFile(grid.options.exporterCsvFilename, csvContent, grid.options.exporterOlderExcelCompatibility); 

Answer 3

我試過自定義出口商，它的工作！

• 先決條件：

  enableSelectAll:true, 
  multiSelect:true, 
  

• 您的控制器需要：

  uiGridExporterService,uiGridExporterConstants 
  

• 應用模塊需要：

  "ui.grid.selection" ,"ui.grid.exporter" 
  
  $scope.exportCSV = function(){ 
          var exportService=uiGridExporterService; 
          var grid=$scope.gridApi.grid; 
          var fileName="myfile.csv"; 
  
          exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() { 
           var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE); 
  
           $scope.gridApi.selection.selectAllVisibleRows(); 
  
           var exportData = exportService.getData(grid, uiGridExporterConstants.SELECTED,uiGridExporterConstants.VISIBLE); 
           var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator); 
           exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility); 
           $scope.gridApi.selection.clearSelectedRows(); 
          }); 
          }