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

Posted 2023-03-28

【中文标题】如何获取和设置 ag-grid 状态？

【英文标题】：How do I get and set ag-grid state?

【发布时间】：2017-08-06 06:23:30

【问题描述】：

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

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

【问题讨论】：

我不确定我是否了解您的应用程序流程，我认为我们需要它来回答您应该在哪里“恢复状态”。保存状态和恢复状态之间发生了什么？

@Pablo 你有示例代码吗？

警告用户集分组时的自动聚合将在 setColumnState 后停止工作

请帮助***.com/questions/65018177/…

【参考方案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');

【讨论】：

如果您想在发生变化时保存状态，您可以将事件处理程序添加到您的网格选项中，如下所示： onSortChanged: () => saveState() , onFilterChanged: () => saveState () , onColumnResized: () => saveState() , onColumnMoved: () => saveState()

【参考方案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 的链接页面获得-网格文档

【讨论】：

感谢您的回答。你知道我应该在哪个回调中将状态恢复到网格吗？

@pupeno 用于恢复列状态，可以使用 gridOptions.columnApi.setColumnState(colState);在 onGridReady() 事件中

【参考方案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 秒超时

【参考方案4】：

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

【参考方案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 = `$keycolstate`;
    const sortStateKey = `$keysortState`;
    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;

【参考方案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 。它用角度完成