单击刷新按钮后如何不重置过滤器答案

【问题标题】：How to not reset filters after refresh button is clicked ag-grid单击刷新按钮后如何不重置过滤器
【发布时间】：2018-12-04 23:49:24
【问题描述】：

我正在使用 ag-grid：

tutorial.js：

(function() {
var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, filter: 'set'},
    {headerName: "Age", field: "age", width: 90, cellRendered: timestampCellRenderer}

];

function timestampCellRenderer(params) {
    return params.value + ' <span style="font-size: 10px; color: grey;">' + new Date().getTime() + '</span>';
}


function onRefreshAll() {
    gridOptions.api.refreshView();
}
var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            gridOptions.api.sizeColumnsToFit();
            console.log(httpResult);
        }
    };
});
window.onRefreshAll = onRefreshAll;
})()

index.html:

<html>
<head>
    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="../dist/ag-grid-enterprise.js?ignore=notused31"></script>
    <script src="tutorial1.js"></script>
    <script src="tutorial.js"></script>

</head>
<body>
<div id="myGrid1" class="ag-fresh" style="height: 400px;"></div>
<div>
    <span style="padding-bottom: 4px; display: inline-block;">
        <button onclick="onRefreshAll()">Ireland & UK</button>


    </span>
    <br/>

</div>

<div id="myGrid" class="ag-fresh" style="height: 400px;"></div>

</body>
</html>

因此，每当单击“刷新”按钮时，对列进行的所有排序都会刷新并重置。是否有可能每次单击刷新按钮时排序都不会重置，而只会更新数据而过滤器仍然存在？

【问题讨论】：

标签： javascript ag-grid

【解决方案1】：

您需要在您的列定义中添加这些filterParams：

  {
    headerName: 'athlete',
    field: 'athlete',
    editable: true,
    width: 100,
    filterParams: {apply: true, newRowsAction: 'keep'}
  },

【讨论】：

【解决方案2】：

我向 AG-Grid 团队提出了同样的问题，请查看delta-row-data 模式。

【讨论】：