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

Question

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

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

这是我找到的用于设置标头名称的示例，因此我尝试对其进行调整以获取标头名称。但我收到这个错误：

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

也许我做得不正确？我对使用 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,
}

在列移动事件上，保存列状态。这是保存到本地存储的示例。更改它以保存到您的数据库。

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.applyColumnState({state:columnState, applyOrder:true});
    }
}

根据@Sebastian 和@jsN00b 的评论更新了答案。

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 列表，并在拖动停止时将其与最终的列顺序进行比较。仅当 2 个订单不同时才会触发该事件。

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

现场演示

Answer 4

• 嗨，下面的代码对我有用。 工作中的 Stackblitz 仓库。 https://stackblitz.com/edit/angular-ivy-eyhjfn

 gridOptions: GridOptions ={
  onDragStopped:(
    event: DragStoppedEvent  
  ) =>  this.test(event)  
  }
  
  test(params){
let columnDragState = params.columnApi.getColumnState();
console.log(columnDragState, "columnDragState")
const colIds = params.columnApi.getAllDisplayedColumns().map(e=>{
  return e.colDef
});
console.log(colIds)

  let arr3 = colIds.map((item, i) => Object.assign({}, item, columnDragState[i]));
  console.log(arr3)
}

<ag-grid-angular
    style="width: 1500px; height: 750px; padding-top: 10px;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    (gridReady)="onGridReady($event)"
    [rowDragManaged]="true"
    
    [gridOptions]="gridOptions"
    [rowData]="rowData"
>
</ag-grid-angular>

Answer 5

通过以下方式，我们可以使用 onColumnMoved 或 onDragStopped 事件

手动更新列顺序

const onDragStopped = useCallback(params => {
    if (params.target.childElementCount > 1) {
        const colIds = params.columnApi.getAllDisplayedColumns().map(col => col.colId) // get new order 
        const value = columns.sort((a, b) => colIds.indexOf(a.colId) - colIds.indexOf(b.colId)) // apply the new order
        if (gridParams) {
        setColumns(value) // update the new order
    }
}
}, [ gridParams, setColumns ])