ExtJS4.2學習(10)分組表格控件--GroupingGrid

分組表格控件在我們的開發中經常被用到，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

<code>    </code><code>actions.push(</code>

<code>        </code><code>{</code>

<code>            </code><code>text: </code><code>'評分'</code><code>,</code>

<code>            </code><code>iconCls: </code><code>'gradebtn'</code><code>,</code>

<code>            </code><code>listeners: {</code>

<code>                </code><code>'click'</code> <code>: </code><code>function</code><code>() {</code>

<code>                    </code><code>var</code> <code>xg = Ext.grid;</code>

<code>                </code> 

<code>                    </code><code>var</code> <code>store = </code><code>new</code> <code>Ext.data.GroupingStore({</code>

<code>                            </code><code>autoLoad:</code><code>true</code><code>,</code>

<code>                            </code><code>reader: </code><code>new</code> <code>Ext.data.JsonReader({</code>

<code>                                </code><code>root: </code><code>'data'</code><code>,</code>

<code>                                </code><code>totalProperty: </code><code>'total'</code><code>,</code>

<code>                                </code><code>remoteSort: </code><code>true</code>

<code>                            </code><code>},</code>

<code>                            </code><code>[</code>

<code>                                </code><code>{name:</code><code>'groupid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'groupname'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemgroupid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemname'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemvalue'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'isnumber'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'status'</code><code>,type:</code><code>'boolean'</code><code>},</code>

<code>                                </code><code>{name: </code><code>'desc'</code><code>}</code>

<code>                            </code><code>]),</code>

<code>                            </code><code>proxy: </code><code>new</code> <code>Ext.data.HttpProxy({</code>

<code>                                 </code><code>url: window.webRoot + </code><code>'rest/qaitem/'</code><code>,</code>

<code>                                 </code><code>method: </code><code>'GET'</code>

<code>                            </code><code>}),</code>

<code>                            </code><code>sortInfo:{field: </code><code>'itemname'</code><code>, direction: </code><code>"ASC"</code><code>},</code>

<code>                            </code><code>groupField:</code><code>'groupname'</code>

<code>                    </code><code>});</code>

<code>                    </code><code>var</code> <code>sm = </code><code>new</code> <code>Ext.grid.CheckboxSelectionModel();</code>

<code>                    </code><code>/** 設定次數</code>

<code>                    </code><code>setNumber = function(v){</code>

<code>                        </code><code>console.info(v);</code>

<code>                        </code><code>var record = sm.getSelected();</code>

<code>                        </code><code>record.set('isNumber',v);</code>

<code>                    </code><code>}</code>

<code>                     </code><code>*/</code>

<code>                    </code><code>var</code> <code>grid = </code><code>new</code> <code>xg.EditorGridPanel({</code>

<code>                        </code><code>store: store,</code>

<code>                        </code><code>clicksToEdit: 1,</code>

<code>                        </code><code>stripeRows:</code><code>true</code><code>,</code>

<code>                        </code><code>sm: sm,</code>

<code>                        </code><code>listeners: {</code>

<code>                            </code><code>beforeedit: </code><code>function</code><code>(e) {</code>

<code>                                </code><code>if</code> <code>(e.record.get(</code><code>"isnumber"</code><code>) == </code><code>"NO"</code><code>) {</code>

<code>                                    </code><code>return</code> <code>false</code><code>;</code>

<code>                                </code><code>}</code><code>else</code><code>{</code>

<code>                                    </code><code>return</code> <code>true</code><code>;</code>

<code>                                </code><code>}</code>

<code>                            </code><code>}</code>

<code>                        </code><code>},</code>

<code>                        </code><code>columns: [</code>

<code>                            </code><code>{id:</code><code>'itemname'</code><code>,header: </code><code>"選項組名稱"</code><code>, width: 270, sortable: </code><code>true</code><code>, dataIndex: </code><code>'itemname'</code><code>},</code>

<code>                            </code><code>{header: </code><code>"次數"</code><code>, width: 30, sortable: </code><code>true</code><code>, dataIndex: </code><code>'isnumber'</code><code>,</code>

<code>                                </code><code>editor: </code><code>new</code> <code>Ext.form.NumberField(),</code>

<code>                                </code><code>renderer: </code><code>function</code><code>(v,m,r){</code>

<code>                                    </code><code>return</code> <code>v; </code>

<code>                                    </code><code>/*</code>

<code>                                    </code><code>if(v =="YES"){</code>

<code>                                        </code><code>var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber);</code>

<code>                                        </code><code>return  r.data.isNumber;//"&lt;input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' /&gt;";</code>

<code>                                    </code><code>}else if(v=="NO"){</code>

<code>                                        </code><code>return "不存在次數";</code>

<code>                                    </code><code>}else{</code>

<code>                                        </code><code>return "資料讀取失敗";</code>

<code>                                    </code><code>}</code>

<code>                                    </code><code>*/</code>

<code>                            </code><code>{dataIndex: </code><code>'groupid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex: </code><code>'itemid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex: </code><code>'itemgroupid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex:</code><code>'status'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{header:</code><code>'分值'</code><code>, width:20, sortable:</code><code>true</code><code>, dataIndex: </code><code>'itemvalue'</code><code>,</code>

<code>//                                  m.css='x-grid-bak-blue';</code>

<code>                                    </code><code>var</code> <code>str = </code><code>"&lt;a href='javascript:void(0);'&gt;"</code><code>+v+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                                    </code><code>var</code> <code>str1 = </code><code>"&lt;a href='javascript:void(0);'&gt;取消&lt;/a&gt;"</code><code>;</code>

<code>                                    </code><code>if</code><code>(r.data.isnumber != </code><code>"NO"</code> <code>){</code>

<code>                                        </code><code>return</code> <code>v;</code>

<code>                                    </code><code>return</code> <code>!r.data.status?str : str1;</code>

<code>                            </code><code>{header: </code><code>"評分選項組"</code><code>, width: 30, sortable: </code><code>true</code><code>, dataIndex: </code><code>'groupname'</code><code>}</code>

<code>                        </code><code>],</code>

<code>                        </code><code>view: </code><code>new</code> <code>Ext.grid.GroupingView({</code>

<code>                            </code><code>forceFit:</code><code>true</code><code>,</code>

<code>                            </code><code>groupTextTpl: </code><code>'{text} ({[values.rs.length]} {[values.rs.length &gt; 1 ? "項" : "個"]})'</code>

<code>                        </code><code>}),</code>

<code>                        </code><code>frame:</code><code>true</code><code>,</code>

<code>                        </code><code>loadMask:</code><code>true</code><code>,</code>

<code>                        </code><code>layout: </code><code>'fit'</code><code>,</code>

<code>                        </code><code>width: 950,</code>

<code>                        </code><code>height: 450</code>

<code>                                    </code> 

<code>                    </code><code>points = </code><code>function</code><code>(is){</code>

<code>                        </code><code>var</code> <code>r = sm.getSelected();</code>

<code>                        </code><code>if</code><code>(r.data.isnumber != </code><code>"NO"</code><code>){</code>

<code>                            </code><code>//轉換成int操作  次數和是否扣分了</code>

<code>                                            </code> 

<code>                        </code><code>}</code>

<code>                        </code><code>r.set(</code><code>'fenshu'</code><code>, r.data.itemvalue);</code>

<code>                        </code><code>r.set(</code><code>'status'</code><code>,!is);</code>

<code>                        </code><code>r.commit();</code>

<code>                    </code><code>var</code> <code>win = </code><code>new</code> <code>Ext.Window({</code>

<code>                        </code><code>title:</code><code>'質檢評分'</code><code>,</code>

<code>                        </code><code>width:955,</code>

<code>                        </code><code>height:515,</code>

<code>                        </code><code>region:</code><code>'center'</code><code>,</code>

<code>                        </code><code>iconCls: </code><code>'gradebtn'</code><code>,</code>

<code>                        </code><code>resizable:</code><code>true</code><code>, </code>

<code>                        </code><code>modal:</code><code>true</code><code>,</code>

<code>                        </code><code>closeAction:</code><code>'hide'</code><code>,</code>

<code>                        </code><code>items:[grid],</code>

<code>                        </code><code>buttons:[{</code>

<code>                            </code><code>text:</code><code>'儲存'</code><code>,</code>

<code>                            </code><code>listeners : {</code>

<code>                                </code><code>'click'</code> <code>: </code><code>function</code><code>() {</code>

<code>                                    </code><code>var</code> <code>fenshu = </code><code>''</code><code>,itemname =</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>status = </code><code>''</code><code>,itemgroupid =</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>isNumber = </code><code>''</code><code>,itemid=</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>groupid = </code><code>''</code><code>,grouptypeid=</code><code>''</code><code>,groupname=</code><code>''</code><code>;</code>

<code>                                    </code><code>for</code> <code>(</code><code>var</code> <code>i = 0; i&lt;store.data.items.length; i++) {</code>

<code>                                        </code><code>var</code> <code>rco = store.getAt(i);</code>

<code>                                        </code><code>if</code><code>(i==store.data.items.length-1){</code>

<code>                                            </code><code>fenshu +=rco.get(</code><code>'itemvalue'</code><code>);</code>

<code>                                            </code><code>status += rco.get(</code><code>'status'</code><code>);</code>

<code>                                            </code><code>groupid += rco.get(</code><code>'groupid'</code><code>);</code>

<code>                                            </code><code>groupname += rco.get(</code><code>'groupname'</code><code>);</code>

<code>                                            </code><code>itemid += rco.get(</code><code>'itemid'</code><code>);</code>

<code>                                            </code><code>itemgroupid += rco.get(</code><code>'itemgroupid'</code><code>);</code>

<code>                                            </code><code>itemname += rco.get(</code><code>'itemname'</code><code>);</code>

<code>                                            </code><code>if</code><code>(rco.get(</code><code>'isnumber'</code><code>)==</code><code>'YES'</code><code>||rco.get(</code><code>'isnumber'</code><code>)==</code><code>'NO'</code><code>||rco.get(</code><code>'isnumber'</code><code>)==</code><code>''</code><code>){</code>

<code>                                                </code><code>isNumber += </code><code>'0'</code><code>;</code>

<code>                                            </code><code>}</code><code>else</code><code>{</code>

<code>                                                </code><code>isNumber += rco.get(</code><code>'isnumber'</code><code>)+</code><code>''</code><code>;</code>

<code>                                            </code><code>}</code>

<code>                                        </code><code>}</code><code>else</code><code>{</code>

<code>                                            </code><code>fenshu +=rco.get(</code><code>'itemvalue'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>status += rco.get(</code><code>'status'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>groupid += rco.get(</code><code>'groupid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>groupname += rco.get(</code><code>'groupname'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemid += rco.get(</code><code>'itemid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemgroupid += rco.get(</code><code>'itemgroupid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemname += rco.get(</code><code>'itemname'</code><code>)+</code><code>','</code><code>;</code>

<code>                                                </code><code>isNumber += </code><code>'0,'</code><code>;</code>

<code>                                                </code><code>isNumber += rco.get(</code><code>'isnumber'</code><code>)+</code><code>','</code><code>;</code>

<code>                                        </code><code>}</code>

<code>                                    </code><code>Ext.Ajax.request({</code>

<code>                                        </code><code>url : window.webRoot + </code><code>'rest/qaitemscore/'</code><code>,</code>

<code>                                        </code><code>params: {</code>

<code>                                                </code><code>userId:</code><code>'&lt;%=userId%&gt;'</code><code>,</code>

<code>                                                </code><code>recordId:rec.get(</code><code>'id'</code><code>),</code>

<code>                                                </code><code>ani:rec.get(</code><code>'ani'</code><code>),</code>

<code>                                                </code><code>dnis:rec.get(</code><code>'dnis'</code><code>),</code>

<code>                                                </code><code>callType:rec.get(</code><code>'callType'</code><code>),</code>

<code>                                                </code><code>begintime:formatDateTime(rec.get(</code><code>'beginTime'</code><code>)),</code>

<code>                                                </code><code>endtime:formatDateTime(rec.get(</code><code>'endTime'</code><code>)),</code>

<code>                                                </code><code>length:rec.get(</code><code>'callTime'</code><code>),</code>

<code>                                                </code><code>extno:rec.get(</code><code>'extNo'</code><code>),</code>

<code>                                                </code><code>fileName:rec.get(</code><code>'fileName'</code><code>),</code>

<code>                                                </code><code>agentNo:rec.get(</code><code>'agentNo'</code><code>),</code>

<code>                                                </code><code>itemvalue: fenshu,</code>

<code>                                                </code><code>status: status,</code>

<code>                                                </code><code>isNumber: isNumber,</code>

<code>                                                </code><code>groupid: groupid,</code>

<code>                                                </code><code>grouptypeid: grouptypeid,</code>

<code>                                                </code><code>groupname: groupname,</code>

<code>                                                </code><code>itemid: itemid,</code>

<code>                                                </code><code>itemgroupid: itemgroupid,</code>

<code>                                                </code><code>itemname: itemname,</code>

<code>                                                </code><code>callId: rec.get(</code><code>'callId'</code><code>),</code>

<code>                                                </code><code>assigenederid: rec.get(</code><code>'assigeneder'</code><code>)</code>

<code>                                                </code><code>},</code>

<code>                                        </code><code>success: </code><code>function</code><code>(res) {</code>

<code>                                            </code><code>myMask.hide();</code>

<code>                                            </code><code>var</code> <code>respText = Ext.decode(res.responseText); </code>

<code>                                            </code><code>if</code><code>(respText.code == </code><code>'OK'</code><code>) {</code>

<code>                                                </code><code>Ext.Msg.alert(</code><code>'系統提示'</code><code>, </code><code>'評分成功'</code><code>);</code>

<code>                                                </code><code>close();</code>

<code>                                            </code><code>} </code><code>else</code> <code>{</code>

<code>                                                </code><code>Ext.Msg.alert(</code><code>'儲存失敗'</code><code>, respText.message + </code><code>"（"</code> <code>+ respText.code + </code><code>"）"</code><code>);</code>

<code>                                        </code><code>},</code>

<code>                                        </code><code>failure: </code><code>function</code><code>(res) {</code>

<code>                                            </code><code>var</code> <code>respText = Ext.decode(res.responseText);</code>

<code>                                            </code><code>Ext.Msg.alert(</code><code>'儲存失敗'</code><code>, respText.message + </code><code>"（"</code> <code>+ respText.code + </code><code>"）"</code><code>);</code>

<code>                                        </code><code>method: </code><code>'POST'</code>

<code>                                    </code><code>});</code>

<code>                                </code><code>}  </code>

<code>                        </code><code>},{</code>

<code>                            </code><code>text:</code><code>'取消'</code><code>,</code>

<code>                            </code><code>listeners : {  </code>

<code>                                    </code><code>close();</code>

<code>                        </code><code>}]</code>

<code>                    </code><code>}).show();</code>

<code>                    </code><code>var</code> <code>close=</code><code>function</code><code>(){</code>

<code>                        </code><code>win.hide();</code>

<code>                </code><code>}</code>

<code>            </code><code>}</code>

<code>        </code><code>}</code>

<code>    </code><code>);</code>

面的是不是覺得有點複雜了？額。。我的錯，下面來看個簡單的：

這個就簡單許多啦，看下主要代碼，相信聰明的你一定能明白：

<code>var</code> <code>columns = [</code>

<code>               </code><code>{header:</code><code>'編号'</code><code>,dataIndex:</code><code>'id'</code><code>},</code>

<code>               </code><code>{header:</code><code>'性别'</code><code>,dataIndex:</code><code>'sex'</code><code>},</code>

<code>               </code><code>{header:</code><code>'名稱'</code><code>,dataIndex:</code><code>'name'</code><code>},</code>

<code>               </code><code>{header:</code><code>'描述'</code><code>,dataIndex:</code><code>'descn'</code><code>}</code>

<code>               </code><code>];</code>

<code>var</code> <code>data = [</code>

<code>            </code><code>[</code><code>'1'</code><code>,</code><code>'male'</code><code>,</code><code>'name1'</code><code>,</code><code>'descn1'</code><code>],</code>

<code>            </code><code>[</code><code>'2'</code><code>,</code><code>'female'</code><code>,</code><code>'name2'</code><code>,</code><code>'descn2'</code><code>],</code>

<code>            </code><code>[</code><code>'3'</code><code>,</code><code>'male'</code><code>,</code><code>'name3'</code><code>,</code><code>'descn3'</code><code>],</code>

<code>            </code><code>[</code><code>'4'</code><code>,</code><code>'female'</code><code>,</code><code>'name4'</code><code>,</code><code>'descn4'</code><code>],</code>

<code>            </code><code>[</code><code>'5'</code><code>,</code><code>'male'</code><code>,</code><code>'name5'</code><code>,</code><code>'descn5'</code><code>]</code>

<code>            </code><code>];</code>

<code>           </code> 

<code>var</code> <code>store = </code><code>new</code> <code>Ext.data.ArrayStore({</code>

<code>    </code><code>fields:[</code>

<code>            </code><code>{name:</code><code>'id'</code><code>},</code>

<code>            </code><code>{name:</code><code>'sex'</code><code>},</code>

<code>            </code><code>{name:</code><code>'name'</code><code>},</code>

<code>            </code><code>{name:</code><code>'descn'</code><code>}</code>

<code>            </code><code>],</code>

<code>    </code><code>data:data,</code>

<code>    </code><code>groupField:</code><code>'sex'</code><code>, </code><code>//确定哪一項分組</code>

<code>    </code><code>sorter:[{property:</code><code>'id'</code><code>, </code><code>//排序屬性</code>

<code>        </code><code>direction:</code><code>'ASC'</code><code>} </code><code>//排序方式</code>

<code>    </code><code>]</code>

<code>});</code>

<code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code>    </code><code>autoHeight:</code><code>true</code><code>,</code>

<code>    </code><code>store:store,</code>

<code>    </code><code>columns:columns,</code>

<code>    </code><code>features:[{ftype:</code><code>'grouping'</code><code>}],</code>

<code>    </code><code>renderTo:</code><code>'grid'</code>

這裡的fields和data還是原來的示例一樣，主要關注的是groupField，它确定通過哪一項進行分組。store可以設定sorter參數，這個參數對應的值有2項：property是排序的屬性，direction是排序的方式。我們把資料傳入，輸出顯示的就是分成一組一組的資料。但是，如果想顯示成我們期待的那種形式，還需要設定feature為grouping

另外，分組表格控件的視圖是有特殊功效的，通過它可以實作分組表格專用的對應功能，如下代碼所示：

<code>//分組表格視圖</code>

<code>Ext.get(</code><code>'expand'</code><code>).on(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>

<code>    </code><code>grid.view.features[0].expandAll();</code>

<code>Ext.get(</code><code>'collapse'</code><code>).on(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>

<code>    </code><code>grid.view.features[0].collapseAll();</code>

<code>Ext.get(</code><code>'one'</code><code>).on(</code><code>'click'</code><code>, </code><code>function</code><code>() {</code>

<code>       </code><code>var</code> <code>feature = grid.view.features[0];</code>

<code>    </code><code>if</code> <code>(feature.isExpanded(</code><code>'female'</code><code>)) {</code>

<code>        </code><code>feature.expand(</code><code>'female'</code><code>);</code>

<code>        </code><code>feature.collapse(</code><code>'female'</code><code>);</code>

<code>    </code><code>} </code><code>else</code> <code>{</code>

<code>    </code><code>}</code>

<code>   </code><code>});</code>

當然實作上面的代碼功能必須要有3個button了，每個id設定對應的點選事件，上例中expandAll()展示所有分組，collapseAll()折疊所有分組。如果想自動判斷分組的狀态進行對應的折疊或展開操作---當分組都已折疊時執行展開所有分組，當分組都已展開時執行折疊所有分組，這就需要我們自己寫代碼來判斷分組的狀态了。這部分還存在着一個初始化的小問題，每次雖然分組顯示的都是展開，但是feature.isExpanded()傳回的都是false，是以要重複調用collapse()和expand()兩個函數，才能實作正常切換。

好了，現在你也來動手嘗試下吧。

本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1339592，如需轉載請自行聯系原作者