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‘);//展开
        }
    });
});
时间: 2024-10-11 17:12:09

ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)的相关文章

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

tbl.js div实现的表格控件,完全免费,no jquery

html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚空服务器开发套件”.目前主要支持微软Edge浏览器,Chrome浏览器,其它未测. tbl.js完全免费,可随意修改,欢迎fork. tbl.js支持列表样式,增删改查,全表搜索,分组,分页功能,全表编辑,全行编辑,单选,多选,样式定制. 可以嵌入到各种容器中,比如jquery的dialog,tab

Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 一.概述 最近在研究QTableView支持多级表头的事情,百度了下网上资料还是挺多的.实现的方式总的来说有2种,效果都还不错,最主要是搞懂其中的原理,做到以不变应万变. 实现多级表头的方式有以下两种方案 行表头和列表头都是用一个表格去模拟 重写QHeadView 以上两种方式都可以实现多级表头,各

javascript可编辑表格控件 支持全键盘操作

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

能在多种前端框架下使用的表格控件

近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

Gridview表格控件

Gridview表格控件 效果图: 分析: 使用和ListvVew很像,都是经过适配器将数据绑定到控件上 具体步骤如下: 1.创建GridView控件,并指定列数 android:numColumns="3" 2.创建显示数据项的数据容器,是一个Lauout文件,里面一个ImageView,一个TextView 上面是ImageView,"小白10"是TextView显示的 3.创建好数据,这里用List来实现 private List<HashMap<

Android入门之GridView(表格控件)

GridView是一个表格控件,可以在每个单元格中显示自定义的View或者字符串.在这里我们要实现一个图标下方有文字的效果. 1.首先我们应自定义布局文件image_text.xml.代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3

更快更低耗!Spread表格控件V11 CTP发布,性能巨大提升

作为一款功能和 Excel 类似的表格控件,Spread Studio 提供灵活的定制能力和丰富的数据可视化效果,可用于在应用系统中实现表格数据录入和编辑等交互功能,涵盖 Windows Forms.ASP.NET.XAML 以及 WinRT 各平台. Spread Studio 素来以数据处理快.内存占用低.和Excel高度相似而享誉全球,被中国石油.华为.NEC.宝钢.中国农行等用户广泛应用在各领域的信息系统中. 日前,全新的Spread Studio V11CTP版本强势发布,为您呈现更惊

可以导入导出到Excel支持多表头多层显示的表格控件Essential Grid

Essential Grid for Windows Forms是一款功能强大的表格控件,很多功能和Excel表格相似,具有15种单元格类型,可以导入导出到Excel,支持多表头,多层显示,合并单元格,插入计算公式,支持LINQ,过滤和分组等. 具体功能: 支持Banner Cells,可以联合背景和邻近的单元格来显示一个背景图像或图片 支持完全自定义单元格样式 支持多个单元格覆盖合并 可以冻结行和列 表格控件支持MS Office 2003, MS Office 2007 和 Vista 样式