万网官网43995000元网站seo推广

Ag-grid实现列拖拽，将列顺序存储到本地(localStorage)，加载页面时根据本地保存的顺序修改列表头顺序，避免刷新页面后列顺序恢复原样

今天在使用 ag-grid 的时候，遇到一个需求，ag-grid 列表头的信息拖拽后，刷新页面列表头又恢复到了原样，这里需要将顺序保存到localStorage；

先说一下这里个人想到的思路：监听表格列拖拽的事件，获取拖拽后列表头顺序将其保存到localStorage，加载页面或刷新页面时在表格加载完成后获取一下存储到localStorage的表头信息，将表头信息修改；

监听列拖拽事件以及读取localStorage内表头信息将表头信息修改：

//列移动事件
onColumnMoved: onColumnMoved,
// 表格创建完成后执行的事件
onGridReady:function(){//判断浏览器有没有存储列表头顺序onGridReady_setColumnState();
}

方法：

// 列表头移动时获取表头数据并存储到localStorage
function onColumnMoved(){var columnState = JSON.stringify(gridOptions.columnApi.getColumnState());localStorage.setItem('My_Column', columnState);
}
// 判断localStorage内有没有存储列表头顺序的信息
function onGridReady_setColumnState() {var columnState = JSON.parse(localStorage.getItem('My_Column'));// 存在即更新表头顺序if (columnState) {gridOptions.columnApi.setColumnState(columnState);}
}

示例：

//表头信息
const columnDefs = {xxxx};
gridOptions = {defaultColDef: {enableValue: true,enableRowGroup: true,//是否可以调整列大小，就是拖动改变列大小resizable: true,enablePivot: true},columnDefs: columnDefs,floatingFilter: true,//设置为true以打开快速过滤器缓存，用于使用快速过滤器时的性能增益.cacheQuickFilter: true, showToolPanel: false, //显示面板enableFilter: true, //数据过滤enableSorting: true,    //排序components: {"validRenderer": ValidRenderer,"voidRenderer": VoidRenderer,"operateRenderer": OperateRenderer,},rowStyle: {'text-align': 'center'},//居中localeText: localeText,//设置中文enableRangeSelection: true,enableCharts: true,popupParent: document.body,onColumnMoved: onColumnMoved,   //列移动事件// 表格创建完成后执行的事件onGridReady:function(){onGridReady_setColumnState();   //判断浏览器有没有存储列表头顺序}
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
get_data();// 列表头移动时获取表头数据并存储到localStorage
function onColumnMoved(){var columnState = JSON.stringify(gridOptions.columnApi.getColumnState());localStorage.setItem('My_Column', columnState);
}
// 判断localStorage内有没有存储列表头顺序的信息
function onGridReady_setColumnState() {var columnState = JSON.parse(localStorage.getItem('My_Column'));// 存在即更新表头顺序if (columnState) {gridOptions.columnApi.setColumnState(columnState);}
}

提示：

lockPosition该属性可以控制是否允许列的拖拽，默认为false允许拖拽，设置为true后就进行拖拽了

lockPosition: true //禁止拖动列的位置