UI Сетка решетчатой ​​фильтрации работает очень медленно

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 = количество строк, это не позволяет использовать алгоритм рендеринга сетки по умолчанию.

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. Тайм-аут будет ждать 200 мс до изменения filtersCheck.

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