您的位置：首页 > Web前端 > JavaScript

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

2013-01-17 09:52 471 查看

做项目的时候，有时候会遇到多表头的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
%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航