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