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

Question

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

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

Answer 1

我相信您正在寻找此文档页面。这描述了列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-Grid文档的链接页面提供了更多功能

Answer 2

该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'}
    }
};

我在这里创建了一个解释器，以说明其工作方式（请注意，我正在从硬代码字符串恢复状态，但适用相同的原理）：https : //plnkr.co/edit/YRH8uQapFU1l37NAjJ9B。rowData设置为加载后1秒超时

Answer 3

他们的网站上有一个非常具体的示例，提供您要执行的操作的详细信息：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 4

需要完成以下工作。

在 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。它是用角度完成的