Ext.net自动保存读取GrdPanel列显示状态

时间:2022-07-01 12:01:54
//layout保存
function SaveLayOut() {
let colVisibleArray = [];
for (var i = 0; i < mcp_gridlist.colModel.columns.length; i++) {
let dataIndex = mcp_gridlist.colModel.columns[i]["dataIndex"];
let hidden = mcp_gridlist.colModel.columns[i]["hidden"];
colVisibleArray.push({ dataIndex, hidden });
}
localStorage.setItem("345223ColumnState", JSON.stringify( colVisibleArray));
console.log("保存布局");
}
//layout读取
function LoadLayOut() {
let colVisibleArray = JSON.parse(localStorage.getItem("345223ColumnState"));
if (colVisibleArray != undefined) {
for (var i = 0; i < colVisibleArray.length; i++) {
let colName = colVisibleArray[i]["dataIndex"];
var findCol = -1;
if (colName != '') {
for (var j = 0; j < mcp_gridlist.colModel.columns.length; j++) {
let dataIndex = mcp_gridlist.colModel.columns[j]["dataIndex"];
if (colName == dataIndex) {
findCol = j;
break;
}
}
if (findCol >= 0) {
let hidden = colVisibleArray[i]["hidden"];
if (hidden === true) {
mcp_gridlist.getColumnModel().setHidden(findCol, true)
}
else {
mcp_gridlist.getColumnModel().setHidden(findCol, false)
}
} } }
}
console.log("读取布局");
}

当显示隐藏列是自动调用SaveLayOut,在Ext.OnReady里添加如下代码

mcp_gridlist.colModel.on('hiddenchange', function () {
//监听的具体内容
SaveLayOut();
});LoadLayOut();

这样当点列头隐藏列时,就会自动保存,下次刷新页面时候保留隐藏状态

事件查看方法(Ext.net官方文档里没有讲解,参考Extjs实现)

Ext.net自动保存读取GrdPanel列显示状态