使用 Ag-Grid,用户可以拖动列以按照自己喜欢的方式对其进行排序。我需要允许用户保存他们的列顺序(到 SQL 后端),以便它成为他们的默认列顺序。我试图像这样获取列名:
var cols = schedGridOptions.columnApi.getAllColumns();
for (col in cols) {
var colDef = col.getColDef();
console.log(colDef.headerName);
}
这是我找到的用于设置 header 名称的示例,因此我尝试对其进行调整以获取 header 名称。但是我得到这个错误:
JavaScript runtime error: Object doesn't support property or method 'getColDef'
也许我做的不正确?我对使用 Ag-Grid 相当陌生。寻找建议。
最佳答案
您正在寻找 setColumnState() 和 getColumnState()。请参阅 https://www.ag-grid.com/javascript-grid-column-api/ 处的文档
在您的网格选项中,为 gridReady 和 columnMoved 设置事件处理程序。 https://www.ag-grid.com/javascript-grid-events/
类似于:
gridOptions = {
rowData: myRowDataSource,
columnDefs: myColumns,
onGridReady: onGridReady,
onColumnMoved: onColumnMoved,
}
在列移动事件中,保存列状态。这是保存到本地存储的示例。更改它以保存到您的数据库。
onColumnMoved(params) {
var columnState = JSON.stringify(params.columnApi.getColumnState());
localStorage.setItem('myColumnState', columnState);
}
在网格就绪事件中,获取并恢复网格状态。同样,将其更改为从您的数据库中提取数据。
onGridReady(params) {
var columnState = JSON.parse(localStorage.getItem('myColumnState'));
if (columnState) {
params.columnApi.setColumnState(columnState);
}
}
关于javascript - Ag-Grid:如何保存和重新加载列顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51488241/