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

Posted 2023-03-28

【中文标题】如何在服务器端/无限行模型中使用快速过滤器？

【英文标题】：How to use Quick Filter with Server-side / Infinite row model?

【发布时间】：2019-05-01 13:53:36

【问题描述】：

根据documentation: Quick Filter，快速过滤器适用于clientSide 行模型。

我们正在为ag-grid 使用serverSide 行模型，并且我们需要对我们在客户端拥有的数据使用快速过滤器 - 在网格的缓存块中。

我虽然使用带有[rowData]="myRowData" 的过滤管道，但使用此行模型，我没有从myRowData 获得任何数据。

例如，如果你看一下这个 plunk Server side row model - quick filter，我在标记中分配了 [rowData]="rowData" 并将其初始化为 []。

从服务器加载初始块后，我假设缓存块数据应该可以通过它访问，因此使用角管道，我可以在客户端过滤掉数据（使用serverSide 行模型模拟快速过滤器）。 [rowData]="rowData | filter: filterText" 之类的东西 - 就像我们过去在 angularjs 中所做的一样

但我担心rowData 无法访问缓存数据。

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

【问题讨论】：

请提供一个简短的示例，用于解决方法

用 plunk 的链接更新了问题

非常感谢您提出这个问题。这正是我正在寻找的，给出的答案解决了问题，并为我节省了大量的工作和调试时间。这个社区最适合喜欢经常进入三倍的开发者。

【参考方案1】：

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

但这是如何解决的：

正如您已经提到的，quickFilter 是 clientSide 模型类型特征 但是没有人取消setFilterModel的使用方式

这将需要大量的黑客攻击，并且可能会破坏某些东西（您必须检查您的解决方案并写下反馈）

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

    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"
    
,

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

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;

将探索每个对象，如果任何属性包含 quickFilter 值 - 它会在结果中

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

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

我的sample

你修改的sample

【讨论】：

感谢您的努力！ Que：所以当我使用setFilterModel 时，它无论如何都会调用dataSource.getRows 并调用服务器来获取数据。这只是我们在客户端应用的过滤器。我对么？如果是这样，我的目标只是通过将过滤器与客户端可用的任何数据一起应用来避免服务器故障。

似乎是这样（无论如何服务器之旅），我试图找到一种从缓存中获取数据的方法，但没有得到线索。此外，它不会请求所有计数（如已加载）并且仅对第一个块进行操作。 *所以我想现在 ag-grid 不提供处理您的案例的可能性，因为即使您尝试直接更新数据，它也会抛出服务端模型 setRowData 方法受到限制的警告。跨度>

这个答案引导我朝着正确的方向解决这个问题，并为我节省了大量的工作和调试时间。超级解释和很棒的指南。感谢您为这个非常重要的开发者社区做出贡献。在处理具有不同数据类型的多个列时，filterData 方法有点复杂。我希望有时间为此创建一个演示 plunker，并在这里分享给其他人。

【参考方案2】：

最终我找到了 ag-Grid 的支持文章：

https://ag-grid.zendesk.com/hc/en-us/articles/360020488612?input_string=serverside+quick+filter

它的第一个示例建议编辑 ServerSideDatasource 的 getRows 以将新密钥附加到 params.request。

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

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

在onGridReady:

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

    ,
  ;