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

文章介绍了如何在Ag-grid中实现列拖拽后,将列顺序保存到localStorage,以便在刷新页面时保持列表头的顺序。通过监听`onColumnMoved`和`onGridReady`事件,动态更新列状态并存储到本地存储。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 //禁止拖动列的位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值