关于保存列表表头的配置,一般我们不需要与后台交互,直接保存在 localStorage 中就能满足常规使用需求(需要浏览器支持)。
直接上代码,插件:
前端精品教程:百度网盘下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
Ext.define(
'ux.plugin.ColumnCustom'
, {
alias:
'plugin.columnCustom'
,
xtype:
'columnCustom'
,
//初始化
init:
function
(gridPanel) {
var
me =
this
;
me.owner = gridPanel;
//根据已有配置项设置表头状态
me.setColumnConfig(gridPanel);
gridPanel.on({
columnschanged: me.saveColumnConfig,
scope: me
});
},
setColumnConfig:
function
(gridPanel) {
var
me =
this
,
xtype = gridPanel.getXType(),
currentColumnConfig = me.getCurrentColumnConfig(),
columnConfig = currentColumnConfig[xtype],
columns = gridPanel.getColumns();
if
(!columnConfig)
return
;
columns.forEach(
function
(column) {
var
dataIndex = column.config.dataIndex;
//只有常规列才有显式的dataIndex,序号列等非常规列应排除在外
if
(!dataIndex)
return
;
column.setHidden(columnConfig[dataIndex]);
});
},
saveColumnConfig:
function
() {
var
me =
this
,
gridPanel = me.owner,
currentColumnConfig = me.getCurrentColumnConfig(),
columns = gridPanel.getColumns(),
xtype = gridPanel.getXType(),
config = {};
columns.forEach(
function
(column) {
var
dataIndex = column.config.dataIndex;
//只有常规列才有显式的dataIndex,序号列等非常规列应排除在外
if
(!dataIndex)
return
;
config[dataIndex] = column.isHidden();
});
//使用xtype作为索引是相对可靠的做法
currentColumnConfig[xtype] = config;
//localStorage的值类型限定为string类型
localStorage.setItem(
'columnConfig'
, Ext.encode(currentColumnConfig));
},
getCurrentColumnConfig:
function
() {
var
allColumnConfigString = localStorage.getItem(
'columnConfig'
),
allColumnConfig = Ext.decode(allColumnConfigString,
true
);
return
allColumnConfig || {};
}
});
|
如何使用:由于这是一个比较常规的需求,因此这里默认给所有的gridPanel配置此插件,并支持手动配置参数禁用之,考虑复写gridPanel类。
代码如下:
前端精品教程:百度网盘下载
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Ext.define(
'override.grid.Panel'
, {
override:
'Ext.grid.Panel'
,
requires: [
'ux.plugin.ColumnCustom'
],
columnCustomDisable:
false
,
initComponent:
function
() {
var
me =
this
;
me.callParent();
//默认全部加上自动保存表头插件,此处追加一个可配属性来禁用此插件
if
(!me.columnCustomDisable) {
me.addPlugin(
'columnCustom'
);
}
}
});
|