您的位置:首页 > Web前端 > JavaScript

ExtJs数据分组(GroupingView)

2016-06-22 16:45 477 查看
<script type="text/javascript">
function toHeader(arr){
var row = arr[0].json;
if(row.STATES==1){
return '<img src=/images/addicon/tgaudit1.png height=13 width=13 /> 审核通过';
}
}
Ext.onReady(function() {
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 : "PID",
mapping : 0
}, {
name : "ENTERPRISE_NAME",
mapping : 1
} ]);

var groupingStore = new Ext.data.GroupingStore({
reader : new Ext.data.JsonReader({
root : "list"
}, [ {
name : "PID"
}, {
name : "ENTERPRISE_NAME"
}, {
name : "PID1"
}, {
name : "WASTE_NAME"
}, {
name : "WASTE_CODE"
}, {
name : "WASTE_TYPE"
} ]),

autoLoad : false,
//totalProperty: "total",
proxy : new Ext.data.HttpProxy({
method : 'POST',
url : '/test/searchZhunrudan.action'
}),

sortInfo : {
field : "PID",
direction : "ASC"
}, //数据排序
groupField : "ENTERPRISE_NAME" //分组字段
})

var bbarPanel = new Ext.PagingToolbar({
pageSize : 20,
store : groupingStore,
displayInfo : true,
displayMsg : '显示 {0} - {1} 条 / 共 {2} 条记录',
emptyMsg : "没有记录"
})

var grid = new Ext.grid.GridPanel({
title : "GroupingView实例",
renderTo : Ext.getBody(),
frame : false,
height : 400,
width : 800,
border : true,
flex : 1,
tbar : [ {
text : "展开/收缩",
iconCls : "search",
handler : function() {
var view = grid.getView();
//var groupId = view.getGroupId("男");
//view.toggleGroup(groupId);
view.toggleAllGroups();
}
} ],

store : groupingStore,
view : new Ext.grid.GroupingView({
sortAscText : "升序",
sortDescText : "降序",
columnsText : "表格字段",
groupByText : "使用当前字段进行分组",
showGroupsText : "表格分组",
groupTextTpl : "{text}(共{[values.rs.length]}条) {[toHeader(values.rs)]}"   //格式化标题,values.rs是内置的变量
}),
columns : [ {
header : "编号",
width : 50,
dataIndex : "PID"
}, {
header : "企业名称",
width : 200,
dataIndex : "ENTERPRISE_NAME",
renderer:function(v,r,c){
return v;
}
}, {
header : "危废ID",
width : 200,
dataIndex : "PID1",
hidden : true
}, {
header : "废物名称",
width : 200,
dataIndex : "WASTE_NAME"
}, {
header : "危废编码",
width : 200,
dataIndex : "WASTE_CODE"
}, {
header : "危废类型",
width : 200,
dataIndex : "WASTE_TYPE"
} ],
bbar : bbarPanel
});

groupingStore.load({
params : {
start : 0,
limit : 20
}
});
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs