UIグリッドカラムのフィルタリングが非常に遅い

Question

私はUIグリッドのセルフィルタを使用していますが、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

実際に私はこれの背後にある理由を見つけました。仮想化ですべての行を一度にレンダリングしました。しきい値=行数。これはデフォルトのUIグリッドレンダリングアルゴリズムを使用できません。 UI-grid.jsここ

Answer 2

が潜在的な回避策は...

、ヘッダの各列フィルタ用に設定時計を取り除きます。これが低迷を取り除くかどうかを見てください。また、グリッドはフィルタの変更に応答しません。手順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; 
    } 

上記連結フィルタ機能を監視する1つのウォッチを作成します。起動すると、filtersCheckという別のスコープ変数を設定するタイムアウトを作成します。タイムアウトは、変更する前に200ms待機します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(); 
    } 
});