UI Grid 列过滤工作很慢答案

【问题标题】：UI Grid column filtering works very slowUI Grid 列过滤工作很慢
【发布时间】：2016-07-07 23:50:45
【问题描述】：

我使用了 UI-Grid 的内置单元格过滤器，但即使我只有 20 条记录，也需要花费大量时间来过滤数据。 <div id="grid1" ui-grid="gridCtrl.gridOptions1" ui-grid-pagination ui-grid-pinning ui-grid-resize-columns ui-grid-move-columns ui-grid-selection style="width: 100%; height:680px" class="ui-grid">

我刚刚启用过滤为真。请帮忙

【问题讨论】：

不看你的代码很难确定。

标签： angularjs angular-ui-grid

【解决方案1】：

实际上我找到了这背后的原因.. 我使用虚拟化阈值 = 行数一次渲染了所有行，这不允许使用默认的 ui 网格渲染算法。

【讨论】：

【解决方案2】：

这是一个潜在的解决方法...

1. 在 ui-grid.js 中，删除为标题中每个列过滤器设置的监视。看看这是否消除了呆滞。它还会使网格不响应过滤器的更改。继续执行步骤 2-4 以使过滤器再次工作。

//$scope.col.filters.forEach(function (filter, i) {
//filterDeregisters.push($scope.$watch('col.filters[' + i + '].term', function(n, o) {
    //  if (n !== o) {
    //    uiGridCtrl.grid.api.core.raise.filterChanged();
    //    uiGridCtrl.grid.api.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
    //    uiGridCtrl.grid.queueGridRefresh();
    //  }
    //}));
 //});

2.在您的代码中，创建一个函数，该函数遍历每列的过滤条件并创建一个包含所有过滤条件的字符串。

function getConcatenatedFilter() {
        var concatenatedFilter = "";
        var api = this.getGridApi();
        if (api) {
            for (var i = 0; i < api.grid.columns.length; i++) {
                concatenatedFilter += i + ":";
                var column = api.grid.columns[i];
                var term = column.filters[0].term || "";
                if (term) {
                    concatenatedFilter += term;
                }
            }
        }
        return concatenatedFilter;
    }

3. 创建一个监视上述级联过滤器功能的手表。当它触发时，创建一个超时来设置另一个名为filtersCheck 的范围变量。在更改 filtersCheck 之前超时将等待 200 毫秒。

 $scope.$watch(function() {return getConcatenatedFilter();},
         function (newVal: string, oldVal: string) {
            if (filterTextTimeout) {
                $timeout.cancel(filterTextTimeout);
            }
            var tempFiltersString = newVal;
            filterTextTimeout = $timeout(() => {
                $scope.filtersCheck = tempFiltersString;
            }, 200);
        });

4. 最后，为filtersCheck 设置一个final watch，它会在触发时刷新网格。

$scope.$watch('filtersCheck', (newVal, oldVal) => {
    if (newVal && oldVal && newVal !== oldVal) {
        gridApi.grid.queueGridRefresh();
    }
});

【讨论】：

嗨@James Lawruk，我有这个问题，但是一旦ui-grid-resize-columns 被删除它工作得更快知道为什么调整列的大小会减慢过滤速度吗？