ExtJS4学习笔记(六)---多表头Grid

做项目的时候,有时候会遇到多表头的Grid,在EXTJS4中,多表头的实现已经很简单了,本文介绍如何实现多表头gird的功能。

之前有一篇文章,讲的是如何实现Grid的分页功能(地址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基础上做出修改,达到多表头Grid+分页功能。

先看下效果图:

 ExtJS4学习笔记(六)---多表头Grid_第1张图片

实现代码如下:

HTML代码:

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>GroupHeaderGrid-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <script type="text/javascript" src="../../bootstrap.js"></script>
  8. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  9. <script type="text/javascript" src="group-header.js"></script>
  10. </head>
  11. <body>
  12. <div id="demo"></div>
  13. </body>
  14. </html>

group-header.js:

 
  1. Ext.require([
  2.     'Ext.grid.*',
  3.     'Ext.toolbar.Paging',
  4.     'Ext.util.*',
  5.     'Ext.data.*'
  6. ]);
  7. Ext.onReady(function(){
  8.     Ext.define('MyData',{
  9.         extend: 'Ext.data.Model',
  10.         fields: [
  11.             'title','author',
  12.             //第一个字段需要指定mapping,其他字段,可以省略掉。
  13.             {name:'hits',type: 'int'},
  14.              'addtime'
  15.         ]
  16.     });
  17.     
  18.     //创建数据源
  19.     var store = Ext.create('Ext.data.Store', {
  20.         //分页大小
  21.         pageSize: 50,
  22.         model: 'MyData',
  23.         //是否在服务端排序
  24.         remoteSort: true,
  25.         proxy: {
  26.            //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
  27.             type: 'ajax',
  28.             url: 'mydata.asp',
  29.             
  30.             reader: {
  31.                 root: 'items',
  32.                 totalProperty  : 'total'
  33.             },
  34.             simpleSortMode: true
  35.         },
  36.         sorters: [{
  37.             //排序字段。
  38.             property: 'hits',
  39.             //排序类型,默认为 ASC
  40.             direction: 'DESC'
  41.         }]
  42.     });
  43.     
  44.     //创建Grid
  45.     var grid = Ext.create('Ext.grid.Panel',{
  46.         store: store,
  47.         columnLines: true,
  48.         columns: [{
  49.             text:"基本信息",
  50.             columns:[
  51.                 {text: "标题", width: 120, dataIndex: 'title', sortable: true},
  52.                 {text: "作者", width: 200, dataIndex: 'author', sortable: false},
  53.                 {text: "点击数", width: 100, dataIndex: 'hits', sortable: true}]
  54.             },
  55.             {text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
  56.         ],
  57.         height:400,
  58.         width:520,
  59.         x:20,
  60.         y:40,
  61.         title: 'ExtJS4 多表头Grid带分页示例',
  62.         disableSelection: true,
  63.         loadMask: true,
  64.         renderTo: 'demo',
  65.         viewConfig: {
  66.             id: 'gv',
  67.             trackOver: false,
  68.             stripeRows: false
  69.         },
  70.         
  71.         bbar: Ext.create('Ext.PagingToolbar', {
  72.             store: store,
  73.             displayInfo: true,
  74.             displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
  75.             emptyMsg: "没有数据"
  76.         })
  77.     })
  78.     store.loadPage(1);
  79. })

JS代码要注意的地方:

1、记得载入'Ext.util.*',

2、二级表头必须指定宽度,如果不指定的话,会提示错误。如图所示,红框里的项,必须要指定宽度。


服务端代码,这里使用ASP编写,具体解释请参考前一篇文章。

 
  1. <%
  2.     Response.ContentType = "text/html"
  3.     Response.Charset = "UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同,区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据,接收的参数只用到了start,limit。sorts和dir在实际操作过程中,将之加入SQL的ORDER BY里即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. If start = "" Then
  12.     start = 0
  13. End If
  14. If limit = "" Then
  15.     limit = 50
  16. End If
  17. sorts = Replace(Trim(Request.Form("sort")),"'",""
  18. dir = Replace(Trim(Request.Form("dir")),"'","")
  19. Dim counts:counts=300
  20. '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。
  21. Dim Ls:Ls = Cint(start) + Cint(limit)
  22. If Ls >= counts Then
  23.    Ls = counts
  24. End If
  25. Echo("{")
  26. Echo("""total"":")
  27. Echo(""""&counts&""",")
  28. Echo("""items"":[")
  29. For i = start+1 To Ls
  30.    Echo("{")
  31.    Echo("""title"":""newstitle"&i&"""")
  32.    Echo(",")
  33.    Echo("""author"":""author"&i&"""")
  34.    Echo(",")
  35.    Echo("""hits"":"""&i&"""")
  36.    Echo(",")
  37.    Echo("""addtime"":"""&Now()&"""")
  38.    Echo("}")
  39.    If i<Ls Then
  40.      Echo(",")
  41.    End If
  42. Next
  43. Echo("]}")
  44. Function Echo(str)
  45.    Response.Write(str)
  46. End Function
  47. %>

 

你可能感兴趣的:(json,Ajax,function,测试,url,ExtJs)