ExtJS4学习--多表头Grid
来源:互联网 发布:mac切换大写字母 编辑:程序博客网 时间:2024/06/06 03:11
转载来源: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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>GroupHeaderGrid-MHZG.NET</title>
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <script type="text/javascript" src="../../bootstrap.js"></script>
- <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" src="group-header.js"></script>
- </head>
- <body>
- <div id="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'
- ]
- });
- //创建数据源
- var store = 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
- var grid = 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的ORDER BY里即可。
- start = Request("start")
- limit = Request("limit")
- If start = "" Then
- start = 0
- End If
- If limit = "" Then
- limit = 50
- End If
- sorts = Replace(Trim(Request.Form("sort")),"'","")
- dir = Replace(Trim(Request.Form("dir")),"'","")
- Dim counts:counts=300
- '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。
- Dim Ls:Ls = Cint(start) + Cint(limit)
- If Ls >= counts Then
- Ls = counts
- End If
- Echo("{")
- Echo("""total"":")
- Echo(""""&counts&""",")
- Echo("""items"":[")
- For i = start+1 To Ls
- Echo("{")
- Echo("""title"":""newstitle"&i&"""")
- Echo(",")
- Echo("""author"":""author"&i&"""")
- Echo(",")
- Echo("""hits"":"""&i&"""")
- Echo(",")
- Echo("""addtime"":"""&Now()&"""")
- Echo("}")
- If i<Ls Then
- Echo(",")
- End If
- Next
- Echo("]}")
- Function Echo(str)
- Response.Write(str)
- End Function
- %>
- 推荐阅读:
- Ext JS添加子组件的误区
- Extjs 4.2.1正式版发布
- ASP.NET+Extjs4.1开发小型OA系统之Viewport
- extjs 4.1下拉复选框(CheckCombo)
- Ext JS 4.1最终版发布
0 0
- ExtJS4学习--多表头Grid
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(六)---多表头Grid
- EXTJS4.2 前台导出多表头grid(曲线救国版)
- Extjs学习 Grid多表头
- EXTJS4 grid表头重复的问题
- ExtJS4 grid表头分层并赋值
- extjs4动态生成多表头
- ExtJS5 - 实现多表头Grid
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(八)---Grid多选/全选
- JAX-WS的 demo1 HelloWorld 例子 之二
- var, object, dynamic的区别及使用
- ThreadLocal是否会引起内存溢出?
- WebSphere7.0数据源配置与应用程序发布
- Linux多线程编程(2)
- ExtJS4学习--多表头Grid
- icc到iar移植日志
- python中的一些对数据的处理
- webdriver启动firefox浏览器
- Ajax局部刷新
- Android--ListView之SimpleAdapter的使用(转)
- python常用函数说明
- 快速排序算法
- std排序