ExtJS4学习--多表头Grid
分类： javascript 2014-06-11 17:59 1676人阅读 评论(2) 收藏 举报
转载来源：http://www.mhzg.net/a/20115/201151911240247.html
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。
之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。
先看下效果图：
实现代码如下：
HTML代码：
- <!DOCTYPE html PUBLIC >
- >
- content=
type= href= /> - src=></script>
- src=></script>
- src=></script>
- ></div>
- </html>
group-header.js：
- Ext.require([
- ,
- ,
- ,
- function
,{ - ,
- ,,
- ,type: },
- store = Ext.create(, {
- ,
- ,
- ,
- ,
- ,
- ,
- grid = Ext.create(,{
- ,
- ,
- , width: 120, dataIndex: , sortable: },
- , width: 200, dataIndex: , sortable: },
- , width: 100, dataIndex: , sortable: }]
- , width: 100, dataIndex: , sortable: }
- ,
- ,
- ,
- ,
- ,
- ,
- , {
- ,
- ,
- JS代码要注意的地方：
1、记得载入‘Ext.util.*‘,2、二级表头必须指定宽度，如果不指定的话，会提示错误。如图所示，红框里的项，必须要指定宽度。
服务端代码，这里使用ASP编写，具体解释请参考前一篇文章。
- <%
- ‘返回JSON数据,自定义一些测试数据。。
‘这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
‘由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
) - )
- If
- End
- If
- End
- )),,)
- )),,)
- Dim
‘注意，这里的counts相当于Rs.RecordCount,也就是记录总数。Dim
If - End
- "{"
""":"
""&counts&","
""":["
For Ls - )
- "title""newstitle"""
) - "author""author"""
) - "hits"""""
) - "addtime"""""
) - i<Ls
- )
- Next
"]}"
FunctionEnd
- %>
时间： 2024-10-12 21:47:19