Question

我正在使用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>

因此，只要单击“刷新”按钮，就会刷新并重置对列执行的所有排序。只要单击刷新按钮但是只更新了数据并且过滤器仍然存在，排序是否可能不会重置？

Answer 1

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

Answer 2

您需要在列defs中添加这些filterParams：

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

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

2 个答案: