分组表格控件在我们的开发中经常被用到，GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家，比如某些信息用树形显示觉得有点大才小用，树形可以有无限极，但是用了分组表格可以完美的展示信息，看下图是我的项目中用到的一个例子，将所有评分项显示出来，并且动态获取是否有次数，如果有次数将出现可编辑，没有次数就不可编辑，如果需要扣分就出现链接，没有就不出现，这正好结合了我们前几节学的知识，看下面的图：
具体代码：我这里是在其他组件中弹出的这个分组表格控件，所以大家看重点代码即可，当时写这个功能可花费了不少时间，大家好好研究哈~
|
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
actions.push(
{
text:
'评分'
,
iconCls:
'gradebtn'
,
listeners: {
'click'
:
function
() {
var
xg = Ext.grid;
var
store =
new
Ext.data.GroupingStore({
autoLoad:
true
,
reader:
new
Ext.data.JsonReader({
root:
'data'
,
totalProperty:
'total'
,
remoteSort:
true
},
[
{name:
'groupid'
},
{name:
'groupname'
},
{name:
'itemid'
},
{name:
'itemgroupid'
},
{name:
'itemname'
},
{name:
'itemvalue'
},
{name:
'isnumber'
},
{name:
'status'
,type:
'boolean'
},
{name:
'desc'
}
]),
proxy:
new
Ext.data.HttpProxy({
url: window.webRoot +
'rest/qaitem/'
,
method:
'GET'
}),
sortInfo:{field:
'itemname'
, direction:
"ASC"
},
groupField:
'groupname'
});
var
sm =
new
Ext.grid.CheckboxSelectionModel();
/** 设置次数
setNumber = function(v){
console.info(v);
var record = sm.getSelected();
record.set('isNumber',v);
}
*/
var
grid =
new
xg.EditorGridPanel({
store: store,
clicksToEdit: 1,
stripeRows:
true
,
sm: sm,
listeners: {
beforeedit:
function
(e) {
if
(e.record.get(
"isnumber"
) ==
"NO"
) {
return
false
;
}
else
{
return
true
;
}
}
},
columns: [
{id:
'itemname'
,header:
"选项组名称"
, width: 270, sortable:
true
, dataIndex:
'itemname'
},
{header:
"次数"
, width: 30, sortable:
true
, dataIndex:
'isnumber'
,
editor:
new
Ext.form.NumberField(),
renderer:
function
(v,m,r){
return
v;
/*
if(v =="YES"){
var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber);
return r.data.isNumber;//"<input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' />";
}else if(v=="NO"){
return "不存在次数";
}else{
return "数据读取失败";
}
*/
}
},
{dataIndex:
'groupid'
,hidden:
true
},
{dataIndex:
'itemid'
,hidden:
true
},
{dataIndex:
'itemgroupid'
,hidden:
true
},
{dataIndex:
'status'
,hidden:
true
},
{header:
'分值'
, width:20, sortable:
true
, dataIndex:
'itemvalue'
,
renderer:
function
(v,m,r){
// m.css='x-grid-bak-blue';
var
str =
"<a href='javascript:void(0);'>"
+v+
"</a>"
;
var
str1 =
"<a href='javascript:void(0);'>取消</a>"
;
if
(r.data.isnumber !=
"NO"
){
return
v;
}
return
!r.data.status?str : str1;
}
},
{header:
"评分选项组"
, width: 30, sortable:
true
, dataIndex:
'groupname'
}
],
view:
new
Ext.grid.GroupingView({
forceFit:
true
,
groupTextTpl:
'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "个"]})'
}),
frame:
true
,
loadMask:
true
,
layout:
'fit'
,
width: 950,
height: 450
});
points =
function
(is){
var
r = sm.getSelected();
if
(r.data.isnumber !=
"NO"
){
//转换成int操作 次数和是否扣分了
}
r.set(
'fenshu'
, r.data.itemvalue);
r.set(
'status'
,!is);
r.commit();
}
var
win =
new
Ext.Window({
title:
'质检评分'
,
width:955,
height:515,
region:
'center'
,
iconCls:
'gradebtn'
,
layout:
'fit'
,
resizable:
true
,
modal:
true
,
closeAction:
'hide'
,
items:[grid],
buttons:[{
text:
'保存'
,
listeners : {
'click'
:
function
() {
var
fenshu =
''
,itemname =
''
;
var
status =
''
,itemgroupid =
''
;
var
isNumber =
''
,itemid=
''
;
var
groupid =
''
,grouptypeid=
''
,groupname=
''
;
for
(
var
i = 0; i<store.data.items.length; i++) {
var
rco = store.getAt(i);
if
(i==store.data.items.length-1){
fenshu +=rco.get(
'itemvalue'
);
status += rco.get(
'status'
);
groupid += rco.get(
'groupid'
);
groupname += rco.get(
'groupname'
);
itemid += rco.get(
'itemid'
);
itemgroupid += rco.get(
'itemgroupid'
);
itemname += rco.get(
'itemname'
);
if
(rco.get(
'isnumber'
)==
'YES'
||rco.get(
'isnumber'
)==
'NO'
||rco.get(
'isnumber'
)==
''
){
isNumber +=
'0'
;
}
else
{
isNumber += rco.get(
'isnumber'
)+
''
;
}
}
else
{
fenshu +=rco.get(
'itemvalue'
)+
','
;
status += rco.get(
'status'
)+
','
;
groupid += rco.get(
'groupid'
)+
','
;
groupname += rco.get(
'groupname'
)+
','
;
itemid += rco.get(
'itemid'
)+
','
;
itemgroupid += rco.get(
'itemgroupid'
)+
','
;
itemname += rco.get(
'itemname'
)+
','
;
if
(rco.get(
'isnumber'
)==
'YES'
||rco.get(
'isnumber'
)==
'NO'
||rco.get(
'isnumber'
)==
''
){
isNumber +=
'0,'
;
}
else
{
isNumber += rco.get(
'isnumber'
)+
','
;
}
}
}
Ext.Ajax.request({
url : window.webRoot +
'rest/qaitemscore/'
,
params: {
userId:
'<%=userId%>'
,
recordId:rec.get(
'id'
),
ani:rec.get(
'ani'
),
dnis:rec.get(
'dnis'
),
callType:rec.get(
'callType'
),
begintime:formatDateTime(rec.get(
'beginTime'
)),
endtime:formatDateTime(rec.get(
'endTime'
)),
length:rec.get(
'callTime'
),
extno:rec.get(
'extNo'
),
fileName:rec.get(
'fileName'
),
agentNo:rec.get(
'agentNo'
),
itemvalue: fenshu,
status: status,
isNumber: isNumber,
groupid: groupid,
grouptypeid: grouptypeid,
groupname: groupname,
itemid: itemid,
itemgroupid: itemgroupid,
itemname: itemname,
callId: rec.get(
'callId'
),
assigenederid: rec.get(
'assigeneder'
)
},
success:
function
(res) {
myMask.hide();
var
respText = Ext.decode(res.responseText);
if
(respText.code ==
'OK'
) {
Ext.Msg.alert(
'系统提示'
,
'评分成功'
);
close();
}
else
{
Ext.Msg.alert(
'保存失败'
, respText.message +
"（"
+ respText.code +
"）"
);
}
},
failure:
function
(res) {
myMask.hide();
var
respText = Ext.decode(res.responseText);
Ext.Msg.alert(
'保存失败'
, respText.message +
"（"
+ respText.code +
"）"
);
},
method:
'POST'
});
}
}
},{
text:
'取消'
,
listeners : {
'click'
:
function
() {
close();
}
}
}]
}).show();
var
close=
function
(){
win.hide();
}
}
}
}
);
|
面的是不是觉得有点复杂了？额。。我的错，下面来看个简单的：
这个就简单许多啦，看下主要代码，相信聪明的你一定能明白：
|
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
|
var
columns = [
{header:
'编号'
,dataIndex:
'id'
},
{header:
'性别'
,dataIndex:
'sex'
},
{header:
'名称'
,dataIndex:
'name'
},
{header:
'描述'
,dataIndex:
'descn'
}
];
var
data = [
[
'1'
,
'male'
,
'name1'
,
'descn1'
],
[
'2'
,
'female'
,
'name2'
,
'descn2'
],
[
'3'
,
'male'
,
'name3'
,
'descn3'
],
[
'4'
,
'female'
,
'name4'
,
'descn4'
],
[
'5'
,
'male'
,
'name5'
,
'descn5'
]
];
var
store =
new
Ext.data.ArrayStore({
fields:[
{name:
'id'
},
{name:
'sex'
},
{name:
'name'
},
{name:
'descn'
}
],
data:data,
groupField:
'sex'
,
//确定哪一项分组
sorter:[{property:
'id'
,
//排序属性
direction:
'ASC'
}
//排序方式
]
});
var
grid =
new
Ext.grid.GridPanel({
autoHeight:
true
,
store:store,
columns:columns,
features:[{ftype:
'grouping'
}],
renderTo:
'grid'
});
|
这里的fields和data还是原来的示例一样，主要关注的是groupField，它确定通过哪一项进行分组。store可以设置sorter参数，这个参数对应的值有2项：property是排序的属性，direction是排序的方式。我们把数据传入，输出显示的就是分成一组一组的数据。但是，如果想显示成我们期待的那种形式，还需要设置feature为grouping
另外，分组表格控件的视图是有特殊功效的，通过它可以实现分组表格专用的对应功能，如下代码所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//分组表格视图
Ext.get(
'expand'
).on(
'click'
,
function
(){
grid.view.features[0].expandAll();
});
Ext.get(
'collapse'
).on(
'click'
,
function
(){
grid.view.features[0].collapseAll();
});
Ext.get(
'one'
).on(
'click'
,
function
() {
var
feature = grid.view.features[0];
if
(feature.isExpanded(
'female'
)) {
feature.expand(
'female'
);
feature.collapse(
'female'
);
}
else
{
feature.collapse(
'female'
);
feature.expand(
'female'
);
}
});
|
当然实现上面的代码功能必须要有3个button了，每个id设置对应的点击事件，上例中expandAll()展示所有分组，collapseAll()折叠所有分组。如果想自动判断分组的状态进行对应的折叠或展开操作---当分组都已折叠时执行展开所有分组，当分组都已展开时执行折叠所有分组，这就需要我们自己写代码来判断分组的状态了。这部分还存在着一个初始化的小问题，每次虽然分组显示的都是展开，但是feature.isExpanded()返回的都是false，所以要重复调用collapse()和expand()两个函数，才能实现正常切换。
好了，现在你也来动手尝试下吧。
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1339592，如需转载请自行联系原作者
