如何将快速过滤器与服务器端/无限行模型一起使用？

As per 文档：快速过滤器 https://www.ag-grid.com/javascript-grid-filter-quick/#server-side-data, 快速过滤器与clientSide行模型。

我们正在使用serverSide行模型为ag-grid /questions/tagged/ag-grid我们需要对客户端的数据（在网格的缓存块中）使用快速过滤器。

我想使用过滤管[rowData]="myRowData"，但是对于这个行模型，我没有从中获取任何数据myRowData.

例如，如果你看一下这个 plunk服务器端行模型-快速过滤 https://plnkr.co/edit/lQcwDzfaBoh5OASj2d9e?p=preview,我已经分配了[rowData]="rowData"在标记中并将其初始化为[].

从服务器加载初始块后，我当时假设缓存块数据应该可以用它访问，这样使用角度管道，我就能够在客户端过滤掉数据（模仿快速过滤器）serverSide行模型）。就像是[rowData]="rowData | filter: filterText"- 就像我们以前做的那样角js /questions/tagged/angularjs

但恐怕缓存数据无法访问rowData.

我们如何才能以某种方式将快速过滤器与 ag-grid 一起使用serverSide行模型？

我想说这不是一件容易的事。

但解决方法如下：

1. 正如你已经提到的quickFilter https://www.ag-grid.com/javascript-grid-filter-quick/ is a clientSide模型类型特征
2. But no one has cancelled the setFilterModel https://www.ag-grid.com/javascript-grid-filtering/#example-get-set-all-filter-models way of usages

   这需要大量的修改，并且可能会破坏某些东西（您必须在解决方案中检查它并然后写反馈）

首先，setFilterModel无法使用虚拟数据（我们必须定义column尤其是给quickFilter logic)

{
    field:'-', would be used as a reference
    hide:true, - hide in grid data
    lockVisible:true, - disable visibility changing via menu
    filter:"agTextColumnFilter", - require for setFilterModel
    filterParams:{
      newRowsAction: "keep"
    }
},

接下来，我们需要创建一个解决方法filterModel in datasource

getRows: function(params) {
    setTimeout(function() {
        var dataAfterSortingAndFiltering = sortAndFilter(data, params.sortModel, params.filterModel);
        var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
        var lastRow = -1;
        if (dataAfterSortingAndFiltering.length <= params.endRow) {
            lastRow = dataAfterSortingAndFiltering.length;
        }
        params.successCallback(rowsThisPage, lastRow);
    }, 3000);
}

function sortAndFilter(allOfTheData, sortModel, filterModel) {
  return sortData(sortModel, filterData(filterModel, allOfTheData));
}
function sortData(sortModel, data) {
  ... sort logic here (doesn't matter for now) ...
}

现在关于quickFilter逻辑，我们已经定义了dummy列及其使用方法：

setFilterModel 将仅接受现有的列名称（在我们的例子中为“-”)

并使用有限的对象道具：但我们将使用filter（如实际案例中使用的）

applyFilter(){
    this.gridApi.setFilterModel({"-":{filter: this.filterText}})
}

最后一个实施点是filterData功能

function filterData(filterModel, data) {
  let filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) { - if filter model is empty - skip it
    return data;
  }
  data = data.filter(i=>{
    if(Object.keys(i).some(k => i[k] && i[k].toString().toLowerCase().includes(filterModel['-'].filter)))
      return i;
  })
  return data;
}

将探索每个对象，如果有任何属性包含quickFiltervalue - 它将出现在结果中

此外，一旦滚动超出现有范围（无限滚动情况），请求的数据将被此属性过滤

*不确定是否应要求检查重复数据

My sample https://plnkr.co/edit/qThVzOuVqgvijQVrlCtX?p=preview

Your modified sample https://plnkr.co/edit/mWUmwOBAV5wjBEhwkMV5?p=preview