Question

我正在使用数据源类向网格提供数据，而在getRows（）函数中，我正在计算要为当前页面返回的行。这个问题是过滤/排序只适用于当前页面。我无法找到任何方法在getRows（）函数中使用网格构建排序过滤来通过过滤整个数据集来返回正确的数据。看起来这将是一个基本功能。数据表和PrimeNG网格都是开箱即用的。我错过了什么或ag-grid真的不支持这个吗？事实上，如果您希望过滤/排序应用于整个数据集（这是最流行的用例imo），似乎无法使用分页以及过滤/排序功能中构建的网格

Answer 1

尚未在其github页面上显示此enhancement

的打开请求

在该页面上，通过为每列创建新的排序和过滤功能，建议了解决方法。考虑到可以获得的复杂性和具体性，我使用Slave/Master功能创建了不同的解决方法。这是一个jsfiddle用于演示目的。

它如何工作是通过一个只显示标题的鬼格。这个鬼网格将处理ag-grid中固有的所有排序和过滤，然后它将排序/过滤的数据传递给僵尸网格。

相关代码（不包括首先设置分页所需的代码）：

HTML：

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

ghostGrid高度需要是标题的高度（默认为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，为整个数据集客户端提供正确的分页/过滤/排序

1 个答案: