ExtJs数据分组(GroupingView)

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值