我如何获得并设置ag

我如何获得并重新设置一个ag-grid表的状态？ 我的意思是，按照什么顺序显示哪些列，使用什么排序和筛选等等。

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

---

我相信你正在寻找这个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-Grid文档的链接页面获得更多功能

---

gridReady事件应该做你需要做的事情。 我怀疑发生了什么是您的过滤器状态正在重置，当您使用数据更新网格时 - 您可以通过设置filterParams: {newRowsAction: 'keep'}来改变此行为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秒

---

需要做以下工作。

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

链接地址: http://www.djcxy.com/p/95599.html

上一篇: How do I get and set ag

下一篇: UserWarning: Label not :NUMBER: is present in all training examples