ExtJS4.2学习(10)分组表格控件--GroupingGrid

简介:

分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家,比如某些信息用树形显示觉得有点大才小用,树形可以有无限极,但是用了分组表格可以完美的展示信息,看下图是我的项目中用到的一个例子,将所有评分项显示出来,并且动态获取是否有次数,如果有次数将出现可编辑,没有次数就不可编辑,如果需要扣分就出现链接,没有就不出现,这正好结合了我们前几节学的知识,看下面的图:
e3928013ae22ce03d29dee09a5901d03.jpg
具体代码:我这里是在其他组件中弹出的这个分组表格控件,所以大家看重点代码即可,当时写这个功能可花费了不少时间,大家好好研究哈~

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();
                     }
                 }
             }
         }
     );

面的是不是觉得有点复杂了?额。。我的错,下面来看个简单的:
30aba30554a28539ea5983c72e0452c8.jpg
这个就简单许多啦,看下主要代码,相信聪明的你一定能明白:

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,如需转载请自行联系原作者


相关文章
|
6月前
在阿里云RPA中,你可以使用"表格控件"来处理网页上的table数据
在阿里云RPA中,你可以使用"表格控件"来处理网页上的table数据
75 1
|
7月前
|
开发者
SAP UI5 初学者教程之二十三 - 列表控件的排序 Sort 和分组 Group 试读版
SAP UI5 初学者教程之二十三 - 列表控件的排序 Sort 和分组 Group 试读版
35 0
|
7月前
|
JSON JavaScript 前端开发
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
51 0
|
8月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
52 0
|
前端开发
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置