最近做了个多表头grid例子,跟大家分享下
jsp中需要先引入GroupHeaderPlugin.js和GroupHeaderPlugin.css文件
文件下载地址:http://download.csdn.net/source/3470467和http://download.csdn.net/source/3470711
或者下载有问题可以留言,我给他发邮箱!
js文件内容
Ext.ns("text");
sasdw.text = function(){
var mainGrid;
var mainGrid_;
var mainWin;
return {
init : function(){
sasdw.text.doGridMain();
sasdw.text.doGridMain_();
sasdw.text.createWindow();
},
createWindow : function(){
mainWin = new Ext.Window({
title : '多表头例子',layout : 'column',width : 840,height : '100%',closable:false,
items : [mainGrid,mainGrid_]
});
mainWin.setPosition(10, 10);
mainWin.show();
},
doGridMain : function(){
var store=new Ext.data.JsonStore({
url : '/sas/pages/salereport/collectInOutStockAction.do?method=getList',
root : 'root',
totalProperty : 'totalCount',
autoLoad : true,
fields : [
{name:'goodsCode',mapping:'goodsCode'},
{name:'goodsName',mapping:'goodsName'},
{name:'kindCode',mapping:'kindCode'},
{name:'kindName',mapping:'kindName'},
{name:'kindOne',mapping:'kindOne'},
{name:'kindTwo',mapping:'kindTwo'},
{name:'kindThree',mapping:'kindThree'},
{name:'kindFour',mapping:'kindFour'}
]
});
var continentGroupRow = [];
continentGroupRow = [
{rowspan: 2},
{header: '购进', colspan: 5, align: 'center', rowspan: 5},
{rowspan: 1},
{rowspan: 1},
{header: '期初库存', colspan: 3, align: 'center', rowspan: 3}
]
var group = new Ext.ux.plugins.GroupHeaderGrid({
rows : [continentGroupRow]
});
mainGrid = new Ext.grid.GridPanel({
region : 'center',layout : 'fit',height : 200,store : store,
autoScroll: false,enableHdMenu : false,autoWidth : true,border: true,frame : true,
columns : [
new Ext.grid.RowNumberer(),
{header : '商品指标',dataIndex:'kindName',width:150},
{header : '合计',dataIndex:'goodsName',width:60},
{header : '省内工业',dataIndex:'kindCode',width:60},
{header : '省外',dataIndex:'goodsName',width:60},
{header : '省内调入',dataIndex:'kindCode',width:60},
{header : '专卖',dataIndex:'goodsName',width:60},
{header : '系统外销',dataIndex:'kindOne',width:60},
{header : '系统内销',dataIndex:'kindThree',width:60},
{header : '合计',dataIndex:'kindFour',width:60},
{header : '省内',dataIndex:'kindFour',width:60},
{header : '省外',dataIndex:'kindFour',width:60}
],
bbar : new Ext.PagingToolbar({
pageSize : 50,
store : store,
displayInfo : true,
displayMsg : "当前第{0}-{1}条记录,共 {2} 条记录"
}),
plugins : group,
viewConfig : { width:840,forceFit : false}
});
}
}
}();
Ext.onReady(text.init, text);
分享到:
相关推荐
"Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括...
在`拼Grid多表头`这个文件中,很可能是包含了一个示例或者教程,演示了如何实现这种动态拼合并表头的功能。通过学习和实践这个例子,开发者可以更好地理解和运用这一技术,提高自己在开发数据驱动应用时的能力。
2. **gtdemo**:这是一个目录,可能包含多个GT-Grid的示例代码。通过查看这些示例,我们可以了解到如何在项目中引入GT-Grid库,如何配置Grid实例,以及如何处理各种交互事件。例如,一个示例可能演示了如何实现动态...
标题“EXT复杂表头+锁定列例子”提示我们这里将探讨EXT库在实现这种功能时的应用。 EXT是一个强大的JavaScript库,专为构建桌面级的Web应用而设计。它提供了丰富的组件,包括表格(Grid),用于高效地展示和操作...
表头单元格通常是用来标识数据列的标题。 当用户点击表头时,我们可以捕获这个点击事件,然后对表格中的数据进行排序。以下是一个基本的步骤概述: 1. **绑定事件监听器**:给每个`<th>`元素添加点击事件监听器,...
5. Flexbox或Grid布局:随着现代浏览器对Flexbox和Grid布局的支持,也可以利用这些新的布局模式来实现固定表头。 通过分析这些HTML文件,我们可以学习到如何在实际项目中应用这些方法,以及在不同场景下选择合适的...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
在标题提到的“一个基于GridView实现的多列表头合并显示的用户控件程序例子”中,我们探讨的核心技术是如何在GridView中实现多级表头的合并,以提供更清晰、更组织化的数据视图。 首先,GridView控件是ASP.NET Web ...
总之,"Grid导出到Excel例子(源码+注释)"是一个实用的学习资源,涵盖了前端开发中数据处理和导出的关键技术。通过深入研究和实践,你不仅可以掌握Grid组件的使用,还能了解数据交换格式、Blob对象以及浏览器下载...
提供了多个开发工具下的丰富例程,让你快速理解本产品,安装程序中包含丰富的可运行例子,安装后即刻体验 Grid++Report。Grid++Report 报表构件具有如下特点:1). 适用范围广:VB.NET、C#.NET、VB、VC、Delphi、C...
提供详尽帮助文档与各种编程平台下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验此报表工具。包括简体中文版、繁体中文版与英文版。经过数年的发展,已经被国内多家有影响力的通用软件厂商采用,其用户...
其他类似的组件库,如ag-Grid、Handsontable等,也提供类似的功能。 5. HTML5的新特性:`<thead>`元素的`sticky`属性在某些现代浏览器中可用,它可以设置表头在滚动时保持可见。但这不是所有浏览器都支持,所以可能...
在这个例子中,点击按钮会更新日期列的格式为月/日/年,并通过调用`refresh`方法刷新Grid以应用新的格式。 至于自定义过滤,Kendo UI Grid提供了`filterable`配置项来定制过滤行为。我们可以为特定列定义一个过滤...
在这个例子中,我们有一个名为 `gv_HB_TJMinite` 的GridView控件,它位于 `UC_HB_TJMiniteList` 用户控件中。 ```html ; margin-top: 0px; border-top: 0px; border: 0px;" onrowcreated="gv_HB_TJMinite_...
-- 更多行 --> ``` 二、固定表头 固定表头通常通过CSS实现。一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y:...
提供详尽帮助文档与各种编程平台下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验此报表工具。包括简体中文版、繁体中文版与英文版。经过数年的发展,已经被国内多家有影响力的通用软件厂商采用,其用户...
提供详尽帮助文档与各种编程语言下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验报表功能。Unicode编码,多国语言集成支持。历经十年发展,多家有影响力的通用软件厂商选用,用户遍布各行各业,已经...
9. **CSS Grid和Flexbox**:虽然不是传统意义上的"div+css",但现代CSS布局技术如Grid和Flexbox也可以实现固定表头的效果,而且更灵活,特别是在响应式设计中。 压缩包中的"DIV+CSS固定表头.html"文件很可能是包含...
Grid++Report是一款C/S与B/S集成报表工具,功能全面易学易用。C/S开发适用于VB.NET,C#,VB,VC,Delphi,BCB,VFP,易语言等。B/S开发适用于ASP.NET,ASP,PHP,JSP等,支持所有WEB服务器。开发C/S报表与B/S报表共享相同的...
11、全中文界面,针对中国式报表进行了很多专门实现,如:表格报表、财务金额线、大写金额、发票圈叉图标、负数红字、多层表头等。很多在国外报表工具中很难实现的功能都可以轻易实现。 12、提供丰富交互事件,轻松...