如何从分页的 ui-grid 中获取过滤后的数据答案

【问题标题】：How to Get Filtered data from paged ui-grid如何从分页的 ui-grid 中获取过滤后的数据
【发布时间】：2017-03-22 06:51:09
【问题描述】：

启用分页功能后，我想从 ui-grid 中获取过滤后的数据。在一般情况下，我使用了

 $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);
            });

但是当启用分页时代码不能正常工作，它只返回第一页的行。但我需要所有过滤后的数据。

最简单的解决方案是根据过滤条件过滤数据源，但它会显着降低性能。

有什么建议吗？

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案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
});

【讨论】：

完美运行
我正在尝试同样的事情，但由于某种原因filterChanged 在过滤表格时没有被触发。知道为什么会这样吗？

【解决方案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);

【讨论】：

【解决方案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();
                     });
                   }

【讨论】：