使用 Ag-Grid，用户可以拖动列以按照他们喜欢的方式对其进行排序。我需要允许用户保存他们的列顺序（到 SQL 后端），以便它成为他们的默认列顺序。我试图得到这样的列名：
var cols = schedGridOptions.columnApi.getAllColumns();
for (col in cols) {
var colDef = col.getColDef();
console.log(colDef.headerName);
}
这是我找到的用于设置标题名称的示例，因此我尝试对其进行调整以获取标题名称。但我得到这个错误：
JavaScript 运行时错误：对象不支持属性或方法 'getColDef'
也许我没有正确执行此操作？我对使用 Ag-Grid 还很陌生。寻找建议。
【问题讨论】：
标签： javascript 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);
}
}
【讨论】：
onColumnMoved将在每次列移动但拖动没有停止时触发。
使用onColumnMoved 根本没有性能。
如果你关心性能，你应该使用onDragStopped
gridOptions.onDragStopped = function (params) {
const colIds = params.columnApi.getAllDisplayedColumns().map(col => col.colId)
console.log(colIds) // all visible colIds with the visible order
}
【讨论】：
我的回答是对@roli 的回答的一个小改进。只有在操作后更改了列顺序时才会触发该事件。如果用户拖动并决定停止并在与以前相同的索引处放下列，则不会触发该事件。
下面的代码是react中的实现。这个想法很简单：在拖动开始时将列顺序存储为 colId 列表，并将其与拖动停止时的最终列顺序进行比较。只有当两个订单之间存在不同时才会触发该事件。
function useDragColumnChange(cb: (e: DragStoppedEvent) => void) {
const columnOrderRef = React.useRef<string[]>([])
const onDragStarted = (e: DragStartedEvent) => {
columnOrderRef.current = e.columnApi.getColumnState().map(c => c.colId);
}
const onDragStopped = (e: DragStoppedEvent) => {
const newColumnOrder = e.columnApi.getColumnState().map(c => c.colId);
const sameOrder = columnOrderRef.current.every(
(c, i) => c === newColumnOrder[i]
);
if (!sameOrder) {
cb(e);
}
}
return { onDragStarted, onDragStopped };
}
// in render()
const { onDragStarted, onDragStopped } = useDragColumnChange(e => console.log('Saving new column order!'))
return (
<AgGridReact
...
onDragStarted={onDragStarted}
onDragStopped={onDragStopped}
/>
);
【讨论】：