表格数据分组：Ext.grid.GroupingView

来源：互联网发布：证券时报数据宝下载. 编辑：程序博客网时间：2024/05/16 10:07

表格数据分组：Ext.grid.GroupingView

博客分类：

ExtJS_3.0

EXT

1、Ext.grid.GroupingView
      主要配置项：
            enableGroupingMenu：是否在表头菜单中进行分组控制，默认为true
            groupByText：表头菜单中分组控制的菜单文字，默认为'Group By This Field'

            enableNoGroups：是否允许用户关闭分组功能，默认为true
            showGroupsText：在表头菜单中启用分组和禁用分组的菜单文字，默认为'Show in Groups'

            groupTextTpl：用于渲染分组信息的模板，默认为'{text}'，常用的可选值有：
                  text：列标题:组字段值
                  gvalue：组字段的值
                  startRow：组行索引

            enableGrouping：是否对数据分组，默认为true
            hideGroupedColumn：是否隐藏分组列，默认为false
            ignoreAdd：在向表格中添加数据时是否刷新表格，默认为false
            showGroupName：是否在分组行上显示分组字段的名字，默认为true
            startCollapsed：初次显示时分组是否处于收缩状态，默认为false

      主要方法：
            collapseAllGroups()：收缩所有分组行
            expandAllGroups()：展开所有分组行
            getGroupId( String value )：根据分组字段值取得组id
            toggleAllGroups( [Boolean expanded] )：切换所有分组行的展开或收缩状态
            toggleGroup( String groupId, [Boolean expanded] )：切换指定分组行的展开或收缩状态

2、Ext.data.GroupingStore
      groupField：分组字段

      groupOnSort：是否在分组字段上排序，默认为false
      remoteGroup：是否远程分组数据，默认为false。如果是远程分组数据，则通过groupBy参数发送分组字段名

3、范例源码

Js代码  
var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];  
              
var person = Ext.data.Record.create([  
    {name: "personId", mapping: 0},  
    {name: "personName", mapping: 1},  
    {name: "personAge", mapping: 2},  
    {name: "personGender", mapping: 3},  
    {name: "personBirth", mapping: 4}  
]);  
  
var grid = new Ext.grid.GridPanel({  
    title: "GroupingView实例",  
    renderTo: "div1",  
    width: 500,  
    height: 300,  
    frame: true,  
    tbar: [  
        {  
            text: "展开/收缩",  
            iconCls: "search",  
            handler: function(){  
                var view = grid.getView();  
                //var groupId = view.getGroupId("男");  
                //view.toggleGroup(groupId);  
                view.toggleAllGroups();  
            }  
        }  
    ],  
      
    store: new Ext.data.GroupingStore({  
        reader: new Ext.data.ArrayReader({id:0}, person),  
        data: datas,  
        sortInfo: {field:"personId", direction:"ASC"}, //数据排序  
        groupField: "personGender" //分组字段  
    }),  
    view: new Ext.grid.GroupingView({  
        sortAscText: "升序",  
        sortDescText: "降序",  
        columnsText: "表格字段",  
        groupByText: "使用当前字段进行分组",  
        showGroupsText: "表格分组",  
        groupTextTpl: "{text}(共{[values.rs.length]}条)"  
    }),  
      
    columns: [  
        {id:"personId", header:"编号", width:50, dataIndex:"personId"},  
        {id:"personName", header:"姓名", width:70, dataIndex:"personName"},  
        {id:"personAge", header:"年龄", width:45, dataIndex:"personAge"},  
        {id:"personGender", header:"性别", width:45, dataIndex:"personGender"},  
        {id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}  
    ]  
});  