javascript – Ag-Grid：如何保存和重新加载列顺序

使用Ag-Grid,用户可以拖动列以他们喜欢的方式对它们进行排序.我需要允许用户保存他们的列顺序(到SQL后端),以便它成为它们的默认列顺序.我试图得到这样的列名：

var cols = schedGridOptions.columnApi.getAllColumns();
for (col in cols) {
    var colDef = col.getColDef();
    console.log(colDef.headerName);
}

这是我找到的用于设置标题名称的示例,因此我尝试将其调整为获取标题名称.但我得到这个错误：

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,
}

在列移动事件上,保存columnState.这是保存到本地存储的示例.将其更改为保存到您的数据库.

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);
    }
}

标签：ag-grid,javascript
来源： https://codeday.me/bug/20190823/1697356.html