ExtJS3 - 如何实现多表头Grid
来源:互联网 发布:玩游戏 手机 知乎 编辑:程序博客网 时间:2024/06/05 14:46
ExtJS 3.x 版本并没有直接实现多表头Grid 的方式,可借助ColumnHeaderGroup插件进行实现,该插件代码已包含在项目源码包中的ux目录下。
1、引入ColumnHeaderGroup插件的css及js文件
<head><meta charset="utf-8" /><title>ColumnHeaderGroup Grid</title><link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="extjs/css/xtheme-blue.css" /><link rel="stylesheet" type="text/css" href="extjs/ux/ColumnHeaderGroup.css" /><script type="text/javascript" src="extjs/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="extjs/ux/ColumnHeaderGroup.js"></script></head>
2、创建ColumnHeaderGroup对象实例
var row = new Ext.ux.grid.ColumnHeaderGroup({rows: [[{header: "",align: "center",colspan: 1}, {header: "A",align: "center",colspan: 1}, {header: "B",align: "center",colspan: 2}, {header: "C",align: "center",colspan: 3}, {header: "D",align: "center",colspan: 2}, {header: "E",align: "center",colspan: 1}]]});
其中,rows属性是一个二维数组,每一个子项代表一行,可以指定每行包含的单元格及其所跨的列数,也可以根据自己的实际需要创建多行。
3、创建Grid实例,并使用ColumnHeaderGroup插件
var sm = new Ext.grid.CheckboxSelectionModel();var viewport = new Ext.Viewport({layout: "fit",items: [{xtype: "grid",cls: "col-grid",title: "多表头Grid",store: new Ext.data.ArrayStore({fields: ["a", "b1", "b2", "c1", "c2", "c3", "d1", "d2", "e"],data: [["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"]]}),sm: sm,columns: [sm, {header: " ",dataIndex: "a",align: "center"}, {header: "B1",dataIndex: "b1",align: "center"}, {header: "B2",dataIndex: "b2",align: "center"}, {header: "C1",dataIndex: "c1",align: "center"}, {header: "C2",dataIndex: "c2",align: "center"}, {header: "C3",dataIndex: "c3",align: "center"}, {header: "D1",dataIndex: "d1",align: "center"}, {header: "D2",dataIndex: "d2",align: "center"}, {header: " ",dataIndex: "e",align: "center"}],viewConfig: {forceFit: true},plugins: row}]});
4、如果Gird是CheckboxSelectionModel模式,那在每一行的表头都会有一个checkbox选择框,而且多表头之间参差不齐。此时可以添加额外的css样式,对跨列的表头进行美化。
td.ux-grid-hd-group-cell .x-grid3-hd-checker {display:none;}.col-grid td {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}col-grid为当前Grid设置的cls值
5、最终效果如下:
1 0
- ExtJS3 - 如何实现多表头Grid
- ExtJS5 - 实现多表头Grid
- WPF Grid + DataGrid多表头 动态列实现
- WPF Grid + DataGrid多表头 动态列实现
- extjs3合并表头 rowspan
- Extjs3 grid 嵌套
- Extjs学习 Grid多表头
- ExtJS4学习--多表头Grid
- EXTjs grid双层表头的实现
- 如何实现ASPxGridView的多表头功能
- ExtJS4学习笔记(六)---多表头Grid
- extjs中grid的多表头
- ExtJS4学习笔记(六)---多表头Grid
- Ext Grid 报表锁定列+多表头的设计与实现(一)
- Ext Grid 锁定列+多表头的设计与实现(二)
- [WinForm每日一帖] 如何制作复杂表头的Grid
- LigerUI之grid表格点击表头标题排序实现
- C#.NET 2003中,如何将DataGrid的表头自由合并,以及多个表头实现
- WEB Server+APP通信API的一次一密验证
- Visual Studio Project Properties Manager(属性管理器)
- ajax获取json的值
- 格式化驱动输出日志
- 菜鸟猿大战Java之集合框架系列(三)
- ExtJS3 - 如何实现多表头Grid
- Resource(3)
- 如何在运行run as 中添加run on server
- 多线程wait-notify;notifyall.sleep
- JDK7和JDK8中HashMap的结构优化
- Android--多线程之Handler
- SQL Server如何保证可空字段中非空值唯一
- jQuery插件开发教程
- 一个优秀的提交应该包含什么?