Question

我已经使用了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">

我刚才启用了过滤功能。请帮忙

Answer 1

实际上我发现了这背后的原因..我使用虚拟化Threshold =行数立即渲染了所有行，这不允许使用默认的ui网格渲染算法。

Answer 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的最终监视，它会在触发时刷新网格。

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

UI网格列过滤工作非常慢

2 个答案: