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

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 //禁止拖动列的位置