ag-grid，为整个数据集客户端提供适当的 paging/filtering/sorting

Question

我正在使用数据源 class 向网格提供数据，并且在 getRows() 函数中我正在为当前页面计算 return 的行数。这个问题是 filtering/sorting 然后只适用于当前页面。我找不到任何方法来使用 getRows() 函数中的网格构建排序过滤，通过过滤整个数据集来 return 正确的数据。这似乎是一个基本功能。数据表和 PrimeNG 网格都是开箱即用的。我是不是遗漏了什么，或者 ag-grid 真的根本不支持这个吗？实际上，如果您希望 filtering/sorting 应用于整个数据集（这是最流行的用例 imo），似乎没有办法将分页与 filtering/sorting 函数中内置的网格一起使用)

Answer 1

还没有，在他们的 github 页面上有一个针对此 enhancement

的公开请求

在该页面上，有一个建议的解决方法，即为每一列创建一个新的排序和筛选函数。考虑到这会变得多么复杂和具体，我使用 Slave/Master feature. Here is a jsfiddle 创建了一个不同的解决方法用于演示目的。

它的工作原理是有一个只显示 header 的幽灵网格。这个幽灵网格将处理 ag-grid 中固有的所有排序和过滤，然后它将 sorted/filtered 数据传递给僵尸网格。

相关代码（不包括最初设置分页的代码）：

HTML:

<div id="ghostGrid" style="height: 25px" class="ag-fresh"></div>
<div id="zombieGrid" style="height: 500px;" class="ag-fresh"></div>

ghostGrid高度需要为header的高度（默认为25px）

CSS:

.ag-bl-full-height {
  overflow: unset;
}

.ag-menu {
  top: 23px !important;
  z-index: 99;
}

此 CSS 是使过滤器菜单在正确位置弹出所必需的（顶部属性可能需要在您的应用程序中使用)

JS:

var zombieGridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    headerHeight:0,
    rowModelType: 'pagination',
    paginationPageSize: 50,
    slaveGrids: [],
};

var ghostGridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableFilter: true,
    enableSorting: true,
    slaveGrids: [],
    onFilterChanged: updateZombieAfterSortAndFilter,
    onSortChanged: updateZombieAfterSortAndFilter
};

function updateZombieAfterSortAndFilter(){
    sortedAndFilteredData = [];
    ghostGridOptions.api.getModel().rowsToDisplay.forEach(e=>sortedAndFilteredData.push(e.data))
    setRowData(sortedAndFilteredData)
}

ghostGridOptions.slaveGrids.push(zombieGridOptions);
zombieGridOptions.slaveGrids.push(ghostGridOptions);

ag-grid，为整个数据集客户端提供适当的 paging/filtering/sorting

ag-grid, provide entire dataset client side with proper paging/filtering/sorting

datatables

ag-grid

angular