网站图片导入wordpress,深圳网站制作必选祥奔科技,wordpress插件开发教程 pdf,商务网站如何推广Ag-grid实现列拖拽#xff0c;将列顺序存储到本地(localStorage)#xff0c;加载页面时根据本地保存的顺序修改列表头顺序#xff0c;避免刷新页面后列顺序恢复原样
今天在使用 ag-grid 的时候#xff0c;遇到一个需求#xff0c;ag-grid 列表头的信息拖拽后#xff0c;…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 //禁止拖动列的位置
