如何获取和设置 ag-grid 状态？

Question

如何获取并重新设置 ag-grid 表的状态？我的意思是，正在显示哪些列，以什么顺序，以什么排序和过滤等等。

更新：getColumnState 和 setColumnState 似乎接近我想要的，但我无法弄清楚我应该保存和恢复状态的回调。我尝试在 onGridReady 中恢复它，但是当实际的行被加载时，我失去了状态。

Answer 1

在他们的网站上有一个非常具体的示例，提供了您尝试执行的操作的详细信息：javascript-grid-column-definitions

function saveState() {
    window.colState = gridOptions.columnApi.getColumnState();
    window.groupState = gridOptions.columnApi.getColumnGroupState();
    window.sortState = gridOptions.api.getSortModel();
    window.filterState = gridOptions.api.getFilterModel();
    console.log('column state saved');
}

以及用于恢复：

function restoreState() {
    gridOptions.columnApi.setColumnState(window.colState);
    gridOptions.columnApi.setColumnGroupState(window.groupState);
    gridOptions.api.setSortModel(window.sortState);
    gridOptions.api.setFilterModel(window.filterState);
    console.log('column state restored');
}

Answer 2

我相信您正在寻找this page of the Docs。这描述了列 api 以及您可以使用哪些功能。最相关的功能是：

• getAllDisplayedColumns() - 用于显示哪些列能够呈现到显示器中。由于虚拟化，可能有一些列还没有渲染到 DOM，如果你只想要渲染到 DOM 的列然后使用getAllDisplayedVirtualColumns() - 这两个函数都显示了它们将显示在网页上的顺序
  • 从这些函数返回的Column 对象包含每个列的排序和过滤属性。

我相信你需要的所有东西都可以从这个函数中获得，就像这样gridOptions.columnApi.getAllDisplayedColumns()

其他可能有用的功能：

• 可从gridOptions.columnApi 获得：
  • getColumnState() - 返回比上述函数更详细的对象 - 只有：aggFunc、colId、hide、pinned、pivotIndex、rowGroupIndex 和 width
  • setColumnState(columnState) - 这允许您将列设置为隐藏、可见或固定，columnState 应该是从 getColumnState() 返回的内容
• 可从gridOptions.api 获得：
  • getSortModel() - 获取当前排序模型
  • setSortModel(model) - 设置网格的排序模型，model 应该与getSortModel() 返回的格式相同
  • getFilterModel() - 获取当前过滤器模型
  • setFilterModel(model) - 设置网格的过滤器模型，model 应该与getFilterModel() 返回的格式相同

还有其他更具体的功能，如果您只想固定一个列，您可以使用setColumnPinned 或一次使用多个列setColumnsPinned，更多功能可从 AG 的链接页面获得-网格文档

Answer 3

gridReady 事件应该执行您需要它执行的操作。我怀疑正在发生的事情是，当您使用数据更新网格时，您的过滤器状态正在重置 - 您可以通过设置 filterParams: {newRowsAction: 'keep'}

来更改此行为

这可以按列设置，也可以使用defaultColDef 全局设置。

这是一个适合您的示例配置：

var gridOptions = {
    columnDefs: columnDefs,
    enableSorting: true,
    enableFilter: true,
    onGridReady: function () {
        gridOptions.api.setFilterModel(filterState);
        gridOptions.columnApi.setColumnState(colState);
        gridOptions.api.setSortModel(sortState);
    },
    defaultColDef: {
        filterParams: {newRowsAction: 'keep'}
    }
};

我在这里创建了一个 plunker 来说明它是如何工作的（注意我正在从硬代码字符串恢复状态，但同样的原则适用）：https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B。 rowData 设置为加载后 1 秒超时

Answer 4

要保留您可能使用的过滤器值 filterParams: {newRowsAction: 'keep'}

Answer 5

这是我的方法。它只涉及使用与实例化 agGrid 相同的 API 创建一个包装函数。

这个函数的一些有趣的事情

• 保存/加载到本地存储
• 使用addEventListener，一旦它被传递给Grid 函数，它就可供options 对象使用。
• 附加到options 对象的onGridReady 回调，而不删除可能已经定义的内容。

用法：

newAgGrid(document.getElementById('my-grid'), options);
    
static newAgGrid(element, options) {
    const ls = window.localStorage;
    const key = `${location.pathname}/${element.id}`;
    const colStateKey = `${key}colstate`;
    const sortStateKey = `${key}sortState`;
    function saveState(params) {
        if (ls) {
            ls.setItem(colStateKey, JSON.stringify(params.columnApi.getColumnState()));
            ls.setItem(sortStateKey, JSON.stringify(params.api.getSortModel()));
        }
    }
    function restoreState(params) {
        if (ls) {
            const colState = ls.getItem(colStateKey);
            if (colState) {
                params.columnApi.setColumnState(JSON.parse(colState));
            }
            const sortState = ls.getItem(sortStateKey)
            if (sortState) {
                params.api.setSortModel(JSON.parse(sortState));
            }
        }
    }
    // monitor the onGridReady event.  do not blow away an existing handler
    let existingGridReady = undefined;
    if (options.onGridReady) {
        existingGridReady = options.onGridReady;
    }
    options.onGridReady = function (params) {
        if (existingGridReady) {
            existingGridReady(params);
        }
        restoreState(params);
    }
    // construct grid
    const grid = new agGrid.Grid(element, options);
    // now that grid is created, add in additional event listeners
    options.api.addEventListener("sortChanged", function (params) {
        saveState(params);
    });
    options.api.addEventListener("columnResized", function (params) {
        saveState(params);
    });
    options.api.addEventListener("columnMoved", function (params) {
        saveState(params);
    });
    return grid;
}

Answer 6

需要做以下事情。

在您的 html 中包含网格的 div

<div id="myGrid" style="width: 500px; height: 200px;"></div>

在js端

//initialize your grid object
var gridDiv = document.querySelector('#myGrid');



//Define the columns options and the data that needs to be shown
        var gridOptions = {
            columnDefs: [
                {headerName: 'Name', field: 'name'},
                {headerName: 'Role', field: 'role'}
            ],
            rowData: [
                {name: 'Niall', role: 'Developer'},
                {name: 'Eamon', role: 'Manager'},
                {name: 'Brian', role: 'Musician'},
                {name: 'Kevin', role: 'Manager'}
            ]
        };

//Set these up with your grid
        new agGrid.Grid(gridDiv, gridOptions);

查看此笔了解更多功能。 https://codepen.io/mrtony/pen/PPyNaB 。它用角度完成