如何在服务器端/无限行模型中使用快速过滤器? [英] How to use Quick Filter with Server-side / Infinite row model?

问题描述

根据文档:快速过滤，快速过滤器适用于 clientSide 行模型.

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

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

<块引用>

例如，如果您查看此 plunk 服务器端行模型 - 快速过滤器，我在标记中分配了 [rowData]=rowData" 并将其初始化为 [].

从服务器加载初始块后，我假设缓存块数据应该可以用它访问，这样使用角度管道，我就可以过滤掉客户端的数据(使用 serverSide 行模型模仿快速过滤器).类似于 [rowData]="rowData |filter: filterText" - 就像我们过去在 angularjs

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

我们如何以某种方式使用带有 serverSide 行模型的 ag-grid 的快速过滤器?

解决方案

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

但解决方法如下:

1. 正如您已经提到的 quickFilter 是一个 clientSide 模型类型特征
2. 但没有人取消了setFilterModel 使用方式<块引用>

   这需要大量的 hack 并且可能会破坏某些东西(你必须在你的解决方案中检查它然后写反馈)

首先，setFilterModel不能处理虚拟数据(我们必须定义column，特别是quickFilter逻辑)

<代码>{字段:'-'，将用作参考hide:true, - 隐藏在网格数据中lockVisible:true, - 禁用通过菜单更改可见性filter:"agTextColumnFilter", - setFilterModel 需要过滤参数:{newRowsAction:保持"}},

接下来，我们需要为 datasource

中的 filterModel 创建一个解决方法

getRows: function(params) {设置超时(函数(){var dataAfterSortingAndFiltering = sortAndFilter(data, params.sortModel, params.filterModel);var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);var lastRow = -1;如果(dataAfterSortingAndFiltering.length <= params.endRow){lastRow = dataAfterSortingAndFiltering.length;}params.successCallback(rowsThisPage, lastRow);}, 3000);}函数 sortAndFilter(allOfTheData, sortModel, filterModel) {返回 sortData(sortModel, filterData(filterModel, allOfTheData));}功能排序数据(排序模型，数据){...这里的排序逻辑(暂时无关紧要)...}

现在关于 quickFilter 逻辑，我们已经为它定义了 dummy 列以及它应该如何使用:

setFilterModel 将只接受现有的列名(在我们的例子中为-")

和有限的对象道具:但我们将使用filter(在实际情况下使用)

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

最后一个实现点是filterData函数

function filterData(filterModel, data) {让 filterPresent = filterModel &&Object.keys(filterModel).length >0;if (!filterPresent) { - 如果过滤器模型为空 - 跳过它返回数据；}数据 = data.filter(i=>{if(Object.keys(i).some(k => i[k] && i[k].toString().toLowerCase().includes(filterModel['-'].filter)))返回我；})返回数据；}

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

<块引用>

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

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

我的示例

您修改后的样本

As per documentation: Quick Filter, quick filter works with clientSide row model.

We are using serverSide row model for ag-grid and we have a requirement to use quick filter with the data we have at client - in the cache blocks of the grid.

I though of using filter pipe with [rowData]="myRowData", but with this row model, I don't get any data from myRowData.

For example, if you have a look at this plunk Server side row model - quick filter, I have assigned [rowData]="rowData" in the markup and initialised it as [].

After loading initial chunk from server, I was assuming that the cache block data should be accessible with it, so that using angular pipe, I would be able to filter out the data at client side (mimicking the quick filter with serverSide row model). Something like [rowData]="rowData | filter: filterText" - like what we used to do in angularjs

But I'm afraid the cache data are not accessible with rowData.

How can we somehow use Quick Filter with ag-grid having serverSide row model?

解决方案

I would say it wasn't an easy task.

But here is how it could be solved:

1. As you already mentioned quickFilter is a clientSide model type feature
2. But no one has cancelled the setFilterModel way of usages

   It would require a lot of hacks and could break something (you have to check it on your solution and write a feedback then)

First of all, setFilterModel can't work with virtual data (we have to define column especially for 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"
    }
},

Next, we need to create a workaround for 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) ...
}

Now about quickFilter logic, we've defined dummy column for it and here how it should be used:

setFilterModel will accept only existing column name ("-" in our case)

and with limited object props: but we will use filter (as it used in real cases)

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

and the last point of implementation is filterData function

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;
}

Each object would be explored, and if any property contains quickFilter value - it would be in the result

Moreover, once you will scroll out of existing range (infinite scroll case) requested data would be filtered by this property

*not sure about duplicated data check on request

My sample

Your modified sample

这篇关于如何在服务器端/无限行模型中使用快速过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！