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

Question

使用Ag-Grid，用户可以拖动列以自己喜欢的方式对其进行排序。我需要允许用户保存他们的列顺序（到SQL后端），以便它成为他们的默认列顺序。我试图获得像这样的列名：

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

这是我发现的用于设置标题名称的示例，因此我尝试使其适应于获取标题名称。但是我得到这个错误：

  

JavaScript运行时错误：对象不支持属性或方法   'getColDef'

也许我没有正确执行此操作？我是刚开始使用Ag-Grid的人。寻找建议。

Answer 1

您正在寻找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);
    }
}

Answer 2

  

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
}

Answer 3

我的答案是@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}
  />
);

实时演示