Ag-Grid:如何保存和重新加载列顺序 [英] Ag-Grid: How to save and reload column order

问题描述

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

Using Ag-Grid, users can drag columns to order them the way they like. I need to allow the user to save their column order (to an SQL backend) so that it becomes the default column order for them. I was trying to get the column names like this:

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

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

This was an example I found for setting the header name, so I tried to adapt it to getting the header name. But I get this error:

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

JavaScript runtime error: Object doesn't support property or method 'getColDef'

也许我没有正确地做这件事?我对使用 Ag-Grid 还很陌生.寻求建议.

Perhaps I'm not doing this correctly? I'm fairly new at using Ag-Grid. Looking for suggestions.

推荐答案

您正在寻找 setColumnState() 和 getColumnState().请参阅 https://www.ag-grid.com/javascript- 上的文档grid-column-api/

You are looking for setColumnState() and getColumnState(). See the docs at https://www.ag-grid.com/javascript-grid-column-api/

在您的网格选项中，为 gridReady 和 columnMoved 设置事件处理程序.https://www.ag-grid.com/javascript-grid-events/

In your grid options, set up event handlers for gridReady and columnMoved. https://www.ag-grid.com/javascript-grid-events/

类似于:

gridOptions = {
   rowData: myRowDataSource,
   columnDefs: myColumns,
   onGridReady: onGridReady,
   onColumnMoved: onColumnMoved,
}

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

On the column moved event, save the columnState. Here's an example saved to local storage. Change it to save to your database.

onColumnMoved(params) {
  var columnState = JSON.stringify(params.columnApi.getColumnState());
  localStorage.setItem('myColumnState', columnState);
}

在网格就绪事件上，获取并恢复网格状态.再次将其更改为从您的数据库中提取.

On the grid ready event, get and restore the grid State. Again, change this to pull from your database.

onGridReady(params) {
    var columnState = JSON.parse(localStorage.getItem('myColumnState'));
    if (columnState) {
      params.columnApi.setColumnState(columnState);
    }
}

这篇关于Ag-Grid:如何保存和重新加载列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！