Ag grid 如何在服务器端/无限行模型中使用快速过滤器？

根据，快速过滤器适用于

clientSide

row模型

我们使用的是

serverSide

row模型，我们需要对网格缓存块中客户端的数据使用快速过滤

我曾想过将过滤管道与

[rowData]=“myRowData”

一起使用，但使用此行模型，我无法从

myRowData

中获取任何数据

例如，如果您查看此plunk，我在标记中指定了

[rowData]=“rowData”

，并将其初始化为

[]

从服务器加载初始块后，我假设缓存块数据应该可以通过它访问，这样，使用角度管道，我就能够在客户端过滤出数据（模仿

serverSide

row模型的快速过滤）。类似于

[rowData]=“rowData | filter:filterText”

——就像我们以前在

但是，恐怕无法使用

rowData

访问缓存数据

---

我们如何才能在ag网格中使用快速过滤器，而ag网格具有

服务器端
行模式？
我认为这不是一项容易的任务

但以下是解决问题的方法：

正如您已经提到的，
clientSide
model-type功能
但没有人取消这种使用方式
它需要大量的黑客攻击，可能会破坏某些东西（你必须检查你的解决方案，然后写一个反馈）


首先，
setFilterModel
无法处理虚拟数据（我们必须定义
column
，尤其是
quickFilter
逻辑）

接下来，我们需要在
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) ...
}

最后一个实现点是
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;
}

每个对象都将被探索，如果任何属性包含
quickFilter
值，那么它将出现在结果中

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

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

我的

您修改的
最终我找到了ag Grid的支持文章：


它的第一个示例建议编辑
ServerSideDatasource
的
getRows
，以便在
params.request
中追加一个新键

例如，您可以执行以下操作：

const customParams = {};
customParams.quickFilterValue = 'someQuery';

在onGridReady中的

const datasource = createServerSideDatasource(server, customParams);
event.api.setServerSideDatasource(datasource)

请提供一个简短的示例，用于解决问题更新了问题的链接，链接到plunkI不能说足够的话，谢谢你提出这个问题。这正是我正在寻找的，给出的答案解决了问题，节省了我大量的工作和调试时间。这个社区对于喜欢经常加入triouble的开发者来说是最好的。谢谢你的努力！问：所以当我使用
setFilterModel
时，它会调用
dataSource.getRows
并调用服务器来获取数据。这只是我们在客户端应用的过滤器。我说得对吗？如果是这样的话，我的目标就是通过对客户端可用的任何数据应用过滤器来避免服务器跳闸。似乎是这样（关于无论如何服务器跳闸），我试图找到一种从缓存中获取数据的方法，但没有得到线索。此外，它不请求所有计数（加载时），只对第一个块进行操作*因此，我认为ag grid目前无法处理您的案例，因为即使您尝试直接更新数据，它也会发出警告，即对于服务端模型
setRowData
方法是受限的。这个答案引导我正确地解决了这个问题，并为我节省了大量的工作和调试时间。超级解释和伟大的指南。感谢您为这个非常重要的开发者社区做出贡献。filterData方法在处理具有不同数据类型的多个列时有点复杂。我希望能抽出时间来创建一个演示plunker，并在这里与其他人分享。
const customParams = {};
customParams.quickFilterValue = 'someQuery';

const datasource = createServerSideDatasource(server, customParams);
event.api.setServerSideDatasource(datasource)

/**
 *
 * @param {object} server
 * @param {object} customParams
 * @returns {object}
 */
export function createServerSideDatasource(server, customParams) {
  // https://www.ag-grid.com/javascript-grid-server-side-model-datasource/

  return {
    getRows: function (params) {
      params.request.customParams = customParams // Our backend will need to handle this custom 'customParams' key that the frontend attaches to the request (which itself will contain a quickFilterValue key and maybe others).

      const response = server.getData(params.request);

      if (response.success) {
        params.successCallback(response.rows, response.lastRow);
      } else {
        params.failCallback();
      }

    },
  };
}