表格数据分组:Ext.grid.GroupingView
2012-07-06 11:51
351 查看
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日")}
]
});
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日")}
]
});
相关文章推荐
- 表格数据分组:Ext.grid.GroupingView
- 表格数据分组:Ext.grid.GroupingView
- 表格数据分组:Ext.grid.GroupingView
- Ext.grid.GroupingView 分组显示
- Ext GroupingView 生成可分组显示的网格数据
- Ext.grid.feature.Grouping页头分组如何显示其他信息
- 使用Ext.grid.column.Action操作表格数据
- Ext.grid.GroupingView
- [Sencha ExtJS & Touch] 表格(Ext.grid.Grid) 和 表格视图选项(Ext.grid.plugin.ViewOptions) 使用的时候要注意的问题
- iphone开发之表格组件UITableView的使用(三)通过加载plist文件字典转模型方式展示分组数据
- 关于Ext.grid.GroupingView
- ExtJs Grid GroupingView 单击分组标题不展开子项目1
- 使用Ext.grid.column.Action操作表格数据
- ExtJs Grid GroupingView 单击分组标题不展开子项目2
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- ExtJs Grid GroupingView 单击分组标题不展开子项目3
- Ext.grid.GroupingView
- iphone开发之表格组件UITableView的使用(二)如何分组展示数据并添加组头和组尾描述
- EXT viewModel绑定数据并切换 grid列排序事件
- Ext.grid.GroupingView 实例