单击刷新按钮后如何不重置过滤器 ag-grid

Question

I am using ag-grid:我正在使用 ag-grid：

tutorial.js:教程.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：

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

So, whenever the "Refresh" button is clicked, all the sorting that is done on a column is refreshed and reset.因此，每当单击“刷新”按钮时，对列进行的所有排序都会刷新并重置。 Is it possible that the sorting doesn't reset whenever the refresh button is clicked but only the data is updated and the filter remains?是否有可能在单击刷新按钮时不会重置排序，而只会更新数据而保留过滤器？

Answer 1

you need to add these filterParams in your column defs:您需要在列 defs 中添加这些filterParams ：

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

Answer 2

我向 AG-Grid 团队提出了同样的问题，请查看增量行数据模式。

单击刷新按钮后如何不重置过滤器 ag-grid

问题描述

2 个解决方案

解决方案1
2 2018-12-04 15:49:24

解决方案2
1 2017-06-15 16:01:01

单击刷新按钮后如何不重置过滤器 ag-grid

问题描述

2 个解决方案

解决方案1 2 2018-12-04 15:49:24

解决方案2 1 2017-06-15 16:01:01

解决方案1
2 2018-12-04 15:49:24

解决方案2
1 2017-06-15 16:01:01