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

鸣谢网址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html

---------------------------------------------------------------------------------------------

分组表格控件在我们的开发中经常被用到，GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家，比如某些信息用树形显示觉得有点大才小用，树形可以有无限极，但是用了分组表格可以完美的展示信息，看下图是我的项目中用到的一个例子，将所有评分项显示出来，并且动态获取是否有次数，如果有次数将出现可编辑，没有次数就不可编辑，如果需要扣分就出现链接，没有就不出现，这正好结合了我们前几节学的知识，看下面的图：

具体代码：我这里是在其他组件中弹出的这个分组表格控件，所以大家看重点代码即可，当时写这个功能可花费了不少时间，大家好好研究哈~

/**
 * Grid
 */
 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); onclick="+'points()'+"'>"+v+"</a>";
                                    var str1 = "<a href='javascript:void(0); onclick="+'points(true)'+"'>取消</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();
                    }
                }
            }
        }
    );  

上面的是不是觉得有点复杂了？额。。我的错，下面来看个简单的：

这个就简单许多啦，看下主要代码，相信聪明的你一定能明白：

/**
 * Grid
 * 此js演示了ExtJS之分组表格--GroupingGrid
 */
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    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({
        width:300,
        autoHeight:true,
        store:store,
        columns:columns,
        features:[{ftype:'grouping'}],
        renderTo:'grid',
        forceFit:true
    });
});

这里的fields和data还是原来的示例一样，主要关注的是groupField，它确定通过哪一项进行分组。store可以设置sorter参数，这个参数对应的值有2项：property是排序的属性，direction是排序的方式。我们把数据传入，输出显示的就是分成一组一组的数据。但是，如果想显示成我们期待的那种形式，还需要设置feature为grouping

另外，分组表格控件的视图是有特殊功效的，通过它可以实现分组表格专用的对应功能，如下代码所示：

html代码：

<button id="expand">expand</button>
<button id="collapse">collapse</button>
<button id="one">toggle one</button>
<div id="grid"></div>

js代码：

//分组表格视图
    Ext.get('expand').on('click',function(){
        grid.view.features[0].expandAll();//grid.view.features[0]:返回grid的第一个features（当前的grid只有一个）
    });
    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')) {//如果female节点是展开的，返回true
//            feature.expand('female');//展开
            feature.collapse('female');//闭合
        } else {
//            feature.collapse('female');//闭合
            feature.expand('female');//展开
        }
    });

当然实现上面的代码功能必须要有3个button了，每个id设置对应的点击事件，上例中expandAll()展示所有分组，collapseAll()折叠所有分组。如果想自动判断分组的状态进行对应的折叠或展开操作---当分组都已折叠时执行展开所有分组，当分组都已展开时执行折叠所有分组，这就需要我们自己写代码来判断分组的状态了。这部分还存在着一个初始化的小问题，每次虽然分组显示的都是展开，但是feature.isExpanded()返回的都是false，所以要重复调用collapse()和expand()两个函数，才能实现正常切换。

（经测试这句话是有误的）。

下面是全部的js代码：

/**
 * Grid
 * 此js演示了ExtJS之分组表格--GroupingGrid
 */
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    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({
        width:300,
        autoHeight:true,
        store:store,
        columns:columns,
        features:[{ftype:'grouping'}],
        renderTo:'grid',
        forceFit:true
    });
    //分组表格视图
    Ext.get('expand').on('click',function(){
        grid.view.features[0].expandAll();//grid.view.features[0]:返回grid的第一个features（当前的grid只有一个）
    });
    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')) {//如果female节点是展开的，返回true
//            feature.expand('female');//展开
            feature.collapse('female');//闭合
        } else {
//            feature.collapse('female');//闭合
            feature.expand('female');//展开
        }
    });
});