&效果展示如下：&aspx页面代码：&%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %&&!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 id="Head1" runat="server"&&&& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&&& &meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&&&& &title&数据展示（版本3）&/title&&/head&&body&&&& &form id="form1" runat="server"&&&& &ext:ResourceManager ID="ResourceManager1" runat="server" /&&&& &ext:GridPanel ID="gpList" runat="server"& Title="" IconCls="icon-grid" AnimCollapse="false" Collapsible="true"& SortableColumns="true" AutoHeight="true" Width="3000"&&&&&&&& &Store&&&&&&&&&&&& &ext:Store ID="StoreAll" runat="server" OnRefreshData="MyData_Refresh"&&&&&&&&&&&&&&&& &Model&&&&&&&&&&&&&&&&&&&& &ext:Model ID="Model1" runat="server"&&&&&&&&&&&&&&&&&&&&&&&& &Fields&&&&&&&&&&&&&&&&&&&&&&&& &/Fields&&&&&&&&&&&&&&&&&&&& &/ext:Model&&&&&&&&&&&&&&&& &/Model&&&&&&&&&&&& &/ext:Store&&&&&&&& &/Store&&&&&&&& &&&&&&& &ColumnModel ID="ColumnModel1" runat="server"&&&&&&&&&&&& &Columns&&&&&&&&&&&& &/Columns&&&&&&&& &/ColumnModel&&&&&&&& &SelectionModel&&&&&&&&&&&& &ext:RowSelectionModel ID="RowSelectionModel1" runat="server" PruneRemoved="false" Mode="Multi" /&&&&&&&& &/SelectionModel&&&& &/ext:GridPanel&&&& &/form&&/body&&/html&aspx.cs文件代码：if (!IsPostBack){　　//清除旧数据与记录集&&&&&&this.StoreAll.Reader.Clear();&&&&& this.gpList.SelectionModel.Clear();&&&&&&this.gpList.ColumnModel.Columns.Clear();&&&&&&this.StoreAll.Model.Clear();　　DataTable dtProject = new PerforBLL().GetData();//从数据库中读取的数据　　//数据源&&&&&DataTable results = new DataTable();&&&&&results.Columns.Add("Name");　　//数据集Store　　Model extModel = new Model();　　extModel.Fields.Add(new ModelField("Name", ModelFieldType.String));　　　　//显示的列数据　　List&ColumnBase& extColumnBaseList = new List&ColumnBase&();　　extColumnBaseList.Add(new RowNumbererColumn() { ID = "RowNumbererColumn1", Width = 25 });　　extColumnBaseList.Add(new Column() { ID = "cName", Text = "名称", Width = 300, DataIndex = "Name" });　　Column wZJ= new Column() { ID = "cWHZ", Text = "汇总" };　　extModel.Fields.Add(new ModelField("W-T", ModelFieldType.Float));&&&&&&extModel.Fields.Add(new ModelField("W-P", ModelFieldType.Float));&&&&&&if (!results.Columns.Contains("W-T")) results.Columns.Add("W-T");&&&&&&if (!results.Columns.Contains("W-P")) results.Columns.Add("W-P");&&&&&& wZJ.Columns.Add(new Column()&&&&&&&{&&&&&&&　　Text = "时间",&&&&&&&&&&&&&Width = 50,&&&&&&&&&&&&&DataIndex = "W-T",&&&&&&&&&&&&&Sortable = true&&&&&&&});&&&&&&&wZJ.Columns.Add(new Column()&&&&&&&{&&&&&&&　　Text = "成本",&&&&&&&&&&&&&Width = 50,&&&&&&&&&&&&&DataIndex = "W-P",&&&&&&&&&&&&&Sortable = true　　});　　extColumnBaseList.Add(wZJ);　　//动态给数据　　foreach (DataRow drProject in dtProject.Rows)&&&&&{　　　　DataRow dr = results.NewRow();&&&&&&&&&&&dr["Name"] = drProject["Name"];　　　　dr["W-T"]= 0;&&&&&&&&&&&dr["W-P"] = 0;　　　　results.Rows.Add(dr);　　}　　this.StoreAll.Model.Add(extModel);&&&&&&this.gpList.ColumnModel.Columns.AddRange(extColumnBaseList);&&&&&&this.StoreAll.DataSource =&&&&&&this.StoreAll.DataBind();&&&&&&this.gpList.Render();}ExtJS4学习笔记(六)---多表头Grid_extjs_MHZG
您的位置： >>
ExtJS4学习笔记(六)---多表头Grid
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。
之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：），本文在此基础上做出修改，达到多表头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&&
&meta&http-equiv=&Content-Type&&content=&text/&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&
&div&id=&demo&&&/div&
&!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&&
&meta http-equiv=&Content-Type& content=&text/ 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&
&div id=&demo&&&/div&
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);
Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*'
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
'title','author',
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'hits',type: 'int'},
//创建数据源
var store = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 50,
model: 'MyData',
//是否在服务端排序
remoteSort: true,
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.asp',
root: 'items',
totalProperty
simpleSortMode: true
sorters: [{
//排序字段。
property: 'hits',
//排序类型，默认为 ASC
direction: 'DESC'
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columnLines: true,
columns: [{
text:&基本信息&,
{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,
title: 'ExtJS4 多表头Grid带分页示例',
disableSelection: true,
loadMask: true,
renderTo: 'demo',
viewConfig: {
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
If&limit&=&&&&Then
&&&&limit&=&50
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
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(&,&)
Echo(&]}&)
Function&Echo(str)
&&&Response.Write(str)
End&Function
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
If limit = && Then
limit = 50
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
Echo(&&&total&&:&)
Echo(&&&&&counts&&&&,&)
Echo(&&&items&&:[&)
For i = start+1 To Ls
Echo(&&&title&&:&&newstitle&&i&&&&&)
Echo(&&&author&&:&&author&&i&&&&&)
Echo(&&&hits&&:&&&&i&&&&&)
Echo(&&&addtime&&:&&&&Now()&&&&&)
If i&Ls Then
Echo(&]}&)
Function Echo(str)
Response.Write(str)
End Function
推荐阅读：
Tags：&&&&&&Ext表格列锁定+多表头插件 - 下载频道
- CSDN.NET
&&&&Ext表格列锁定+多表头插件
Ext表格列锁定+多表头插件
将BufferView添加到LockingGridView中,
修改GroupHeaderPlugin使其可用于LockingGridView
内有使用示例
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
开发技术下载排行谁能提供一个ext多表头的案例？_百度知道
谁能提供一个ext多表头的案例？
那个写法试验过了如题。不要提供ext自带的案例，只要能展示多表头即可，不要求其他效果
我有更好的答案
除了columns下columns 还有比的写法么 ？可以自己写table 标签啊
其他类似问题
为您推荐：
ext的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Ext.gridpanel 锁列与多表头归拢
Ext.gridpanel 锁列与多表头合并
如果要实现EXT Gridpanel的锁列和多表头整合一起使用，有点难度！因为它们是两个不同的扩展组件。
目前我有一个做法，效果我已经上传。就是用两个GridPanel，数据共享一份，
一个把需要锁定的列显示（考虑锁定列数目少的情况），去掉边框frame:false，布局在左边
另一个把多表头的做法 ，可参考GroupHeaderPlugin.js组件。
因为需要两个Gridpanel选中同步，滚动条同步所以用到,其中grid和grid1分别代表不同的Gridpanel
grid.addListener("rowclick",function(_grid,_rowIndex,_evt){
grid1.getSelectionModel().selectRow(_rowIndex);
grid1.addListener("rowclick",function(_grid,_rowIndex,_evt){
grid.getSelectionModel().selectRow(_rowIndex);
grid.addListener("bodyscroll",function(scrollLeft,scrollTop){
var c = grid1.getView().scroller.
c.scrollTop =scrollT
c.scrollLeft =scrollL
grid1.addListener("bodyscroll",function(scrollLeft,scrollTop){
var c = grid.getView().scroller.
c.scrollTop =scrollT
//c.scrollLeft =scrollL
文章评论 以下网友留言只代表其个人观点，不代表本网站的观点和立场。}