Extjs学习 Grid多表头

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

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

先看下效果图:

 Extjs学习 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、二级表头必须指定宽度,如果不指定的话,会提示错误。如图所示,红框里的项,必须要指定宽度。

Extjs学习 Grid多表头_第2张图片

你可能感兴趣的:(Extjs学习 Grid多表头)