5

根据文档： Quick Filter，快速过滤器适用于clientSide行模型。

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

我虽然使用过滤器管道[rowData]="myRowData"，但使用这个行模型，我没有从myRowData.

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

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

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

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

4

2 回答 2

3

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

但这是如何解决的：

  1. 正如您已经提到quickFilter的是clientSide模型类型功能
  2. 但是没有人取消使用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"
    }
},

接下来，我们需要为filterModelin创建一个解决方法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;
}

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

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

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

我的sample

你的修改sample

于 2018-12-01T10:30:34.997 回答
1

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

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

它的第一个示例建议编辑getRows您ServerSideDatasource的附加到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();
      }

    },
  };
}
于 2020-12-16T18:13:06.843 回答