如何从分页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的东西来过滤$scope.gridApi.grid.rows，其中visible属性设置为true:

// 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();
                       });
                     }