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



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

02.jpgvKe思考者日记网-束洋洋个人博客

具体代码:我这里是在其他组件中弹出的这个分组表格控件,所以大家看重点代码即可,当时写这个功能可花费了不少时间,大家好好研究哈~vKe思考者日记网-束洋洋个人博客

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

 vKe思考者日记网-束洋洋个人博客

 vKe思考者日记网-束洋洋个人博客

上面的是不是觉得有点复杂了?额。。我的错,下面来看个简单的:vKe思考者日记网-束洋洋个人博客

01.jpgvKe思考者日记网-束洋洋个人博客

这个就简单许多啦,看下主要代码,相信聪明的你一定能明白:vKe思考者日记网-束洋洋个人博客

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

 vKe思考者日记网-束洋洋个人博客

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

另外,分组表格控件的视图是有特殊功效的,通过它可以实现分组表格专用的对应功能,如下代码所示:vKe思考者日记网-束洋洋个人博客

//分组表格视图  
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');  
    }  
   });

 vKe思考者日记网-束洋洋个人博客

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

好了,现在你也来动手尝试下吧。vKe思考者日记网-束洋洋个人博客

 vKe思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridvKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridvKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingvKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格vKe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldvKe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件vKe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorvKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 vKe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解vKe思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目vKe思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈