分組表格控件在我們的開發(fā)中經(jīng)常被用到，GroupingGrid分組表格就是在普通表格的基礎(chǔ)上，根據(jù)某一列的數(shù)據(jù)顯示表格中的數(shù)據(jù)分組的表格控件。舉個(gè)例子給大家，比如某些信息用樹形顯示覺得有點(diǎn)大才小用，樹形可以有無限極，但是用了分組表格可以完美的展示信息，看下圖是我的項(xiàng)目中用到的一個(gè)例子，將所有評(píng)分項(xiàng)顯示出來，并且動(dòng)態(tài)獲取是否有次數(shù)，如果有次數(shù)將出現(xiàn)可編輯，沒有次數(shù)就不可編輯，如果需要扣分就出現(xiàn)鏈接，沒有就不出現(xiàn)，這正好結(jié)合了我們前幾節(jié)學(xué)的知識(shí)，看下面的圖：

具體代碼：我這里是在其他組件中彈出的這個(gè)分組表格控件，所以大家看重點(diǎn)代碼即可，當(dāng)時(shí)寫這個(gè)功能可花費(fèi)了不少時(shí)間，大家好好研究哈~

actions.push( { text: '評(píng)分', 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(); /** 設(shè)置次數(shù)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: "選項(xiàng)組名稱", width: 270, sortable: true, dataIndex: 'itemname'}, {header: "次數(shù)", 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 "不存在次數(shù)";}else{return "數(shù)據(jù)讀取失敗";}*/ } }, {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: "評(píng)分選項(xiàng)組", width: 30, sortable: true, dataIndex: 'groupname'} ], view: new Ext.grid.GroupingView({ forceFit:true, groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "項(xiàng)" : "個(gè)"]})' }), frame:true, loadMask:true, layout: 'fit', width: 950, height: 450 }); points = function(is){ var r = sm.getSelected(); if(r.data.isnumber != "NO"){ //轉(zhuǎn)換成int操作 次數(shù)和是否扣分了 } r.set('fenshu', r.data.itemvalue); r.set('status',!is); r.commit(); } var win = new Ext.Window({ title:'質(zhì)檢評(píng)分', 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('系統(tǒng)提示', '評(píng)分成功'); 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(); } } } } );

面的是不是覺得有點(diǎn)復(fù)雜了？額。。我的錯(cuò)，下面來看個(gè)簡單的：

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

var columns = [ {header:'編號(hào)',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', //確定哪一項(xiàng)分組 sorter:[{property:'id', //排序?qū)傩?direction:'ASC'} //排序方式 ] }); var grid = new Ext.grid.GridPanel({ autoHeight:true, store:store, columns:columns, features:[{ftype:'grouping'}], renderTo:'grid' });

這里的fields和data還是原來的示例一樣，主要關(guān)注的是groupField，它確定通過哪一項(xiàng)進(jìn)行分組。store可以設(shè)置sorter參數(shù)，這個(gè)參數(shù)對(duì)應(yīng)的值有2項(xiàng)：property是排序的屬性，direction是排序的方式。我們把數(shù)據(jù)傳入，輸出顯示的就是分成一組一組的數(shù)據(jù)。但是，如果想顯示成我們期待的那種形式，還需要設(shè)置feature為grouping
另外，分組表格控件的視圖是有特殊功效的，通過它可以實(shí)現(xiàn)分組表格專用的對(duì)應(yīng)功能，如下代碼所示：

//分組表格視圖 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'); } });

當(dāng)然實(shí)現(xiàn)上面的代碼功能必須要有3個(gè)button了，每個(gè)id設(shè)置對(duì)應(yīng)的點(diǎn)擊事件，上例中expandAll()展示所有分組，collapseAll()折疊所有分組。如果想自動(dòng)判斷分組的狀態(tài)進(jìn)行對(duì)應(yīng)的折疊或展開操作---當(dāng)分組都已折疊時(shí)執(zhí)行展開所有分組，當(dāng)分組都已展開時(shí)執(zhí)行折疊所有分組，這就需要我們自己寫代碼來判斷分組的狀態(tài)了。這部分還存在著一個(gè)初始化的小問題，每次雖然分組顯示的都是展開，但是feature.isExpanded()返回的都是false，所以要重復(fù)調(diào)用collapse()和expand()兩個(gè)函數(shù)，才能實(shí)現(xiàn)正常切換。
好了，現(xiàn)在你也來動(dòng)手嘗試下吧。

連載中，請(qǐng)大家持續(xù)關(guān)注，本文出自我的個(gè)人網(wǎng)站思考者日記網(wǎng)

轉(zhuǎn)載于:https://blog.51cto.com/shuyangyang/1339592

總結(jié)

以上是生活随笔為你收集整理的ExtJS4.2学习(10)分组表格控件--GroupingGrid的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。