做项目的时候,有时候会遇到多表头的Grid,在EXTJS4中,多表头的实现已经很简单了,本文介绍如何实现多表头gird的功能。
之前有一篇文章,讲的是如何实现Grid的分页功能(地址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基础上做出修改,达到多表头Grid+分页功能。
先看下效果图:
实现代码如下:
HTML代码:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>GroupHeaderGrid-MHZG.NET</title>
- <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
- <scripttype="text/javascript"src="../../bootstrap.js"></script>
- <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
- <scripttype="text/javascript"src="group-header.js"></script>
- </head>
-
- <body>
- <divid="demo"></div>
- </body>
- </html>
group-header.js:
- Ext.require([
- 'Ext.grid.*',
- 'Ext.toolbar.Paging',
- 'Ext.util.*',
- 'Ext.data.*'
- ]);
-
- Ext.onReady(function(){
- Ext.define('MyData',{
- extend:'Ext.data.Model',
- fields:[
- 'title','author',
- //第一个字段需要指定mapping,其他字段,可以省略掉。
- {name:'hits',type:'int'},
- 'addtime'
- ]
- });
-
- //创建数据源
- varstore=Ext.create('Ext.data.Store',{
- //分页大小
- pageSize:50,
- model:'MyData',
- //是否在服务端排序
- remoteSort:true,
- proxy:{
- //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
- type:'ajax',
- url:'mydata.asp',
-
- reader:{
- root:'items',
- totalProperty:'total'
- },
- simpleSortMode:true
- },
- sorters:[{
- //排序字段。
- property:'hits',
- //排序类型,默认为ASC
- direction:'DESC'
- }]
- });
-
- //创建Grid
- vargrid=Ext.create('Ext.grid.Panel',{
- store:store,
- columnLines:true,
- columns:[{
- text:"基本信息",
- columns:[
- {text:"标题",width:120,dataIndex:'title',sortable:true},
- {text:"作者",width:200,dataIndex:'author',sortable:false},
- {text:"点击数",width:100,dataIndex:'hits',sortable:true}]
- },
- {text:"添加时间",width:100,dataIndex:'addtime',sortable:true}
- ],
- height:400,
- width:520,
- x:20,
- y:40,
- title:'ExtJS4多表头Grid带分页示例',
- disableSelection:true,
- loadMask:true,
- renderTo:'demo',
- viewConfig:{
- id:'gv',
- trackOver:false,
- stripeRows:false
- },
-
- bbar:Ext.create('Ext.PagingToolbar',{
- store:store,
- displayInfo:true,
- displayMsg:'显示{0}-{1}条,共计{2}条',
- emptyMsg:"没有数据"
- })
- })
- store.loadPage(1);
- })
JS代码要注意的地方:
1、记得载入'Ext.util.*',
2、二级表头必须指定宽度,如果不指定的话,会提示错误。如图所示,红框里的项,必须要指定宽度。
服务端代码,这里使用ASP编写,具体解释请参考前一篇文章。
- <%
- Response.ContentType="text/html"
- Response.Charset="UTF-8"
- %>
- <%
- '返回JSON数据,自定义一些测试数据。。
- '这里的参数与EXT3.x相同,区别在于排序字段和排序方式使用了新的属性。
- '由于这里是测试数据,接收的参数只用到了start,limit。sorts和dir在实际操作过程中,将之加入SQL的ORDERBY里即可。
- start=Request("start")
- limit=Request("limit")
- Ifstart=""Then
- start=0
- EndIf
- Iflimit=""Then
- limit=50
- EndIf
- sorts=Replace(Trim(Request.Form("sort")),"'","")
- dir=Replace(Trim(Request.Form("dir")),"'","")
-
- Dimcounts:counts=300
- '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。
-
- DimLs:Ls=Cint(start)+Cint(limit)
- IfLs>=countsThen
- Ls=counts
- EndIf
-
- Echo("{")
- Echo("""total"":")
- Echo(""""&counts&""",")
- Echo("""items"":[")
- Fori=start+1ToLs
- Echo("{")
- Echo("""title"":""newstitle"&i&"""")
- Echo(",")
- Echo("""author"":""author"&i&"""")
- Echo(",")
- Echo("""hits"":"""&i&"""")
- Echo(",")
- Echo("""addtime"":"""&Now()&"""")
- Echo("}")
- Ifi<LsThen
- Echo(",")
- EndIf
- Next
- Echo("]}")
- FunctionEcho(str)
- Response.Write(str)
- EndFunction
- %>