|
转载来源：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',
-
-
{name:'hits',type: 'int'},
-
'addtime'
-
]
-
});
-
-
-
var store = Ext.create('Ext.data.Store', {
-
-
pageSize: 50,
-
model: 'MyData',
-
-
remoteSort: true,
-
proxy: {
-
-
type: 'ajax',
-
url: 'mydata.asp',
-
-
reader: {
-
root: 'items',
-
totalProperty : 'total'
-
},
-
simpleSortMode: true
-
},
-
sorters: [{
-
-
property: 'hits',
-
-
direction: 'DESC'
-
}]
-
});
-
-
-
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"
-
%>
-
<%
-
-
-
-
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
-
-
-
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
-
%>
|
转播
