组合表头

最新推荐文章于 2024-03-01 16:51:09 发布

iteye_18833

最新推荐文章于 2024-03-01 16:51:09 发布

阅读量372

点赞数

分类专栏： EXTJS 文章标签： json ux

本文链接：https://blog.youkuaiyun.com/iteye_18833/article/details/82644998

版权

EXTJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Extjs中实现组合表头，并提供了两种实现方式：ColumnHeaderGroup.js适合表头组合但不支持筛选，而GroupHeaderPlugin.js则增加了筛选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Extjs 组合表头必须引用extjs自带的表头分组包在这里我提供了两个表头分组包，ColumnHeaderGroup.js和GroupHeaderPlugin.js。ColumnHeaderGroup.js是Extjs3.1中自带的，提供表头组合，但无法进行筛选；GroupHeaderPlugin.js是改进过的，可进行筛选。

接下来就是实际代码

	var group1 = [{}, {
				header : '分组1-1a',
				colspan : 4,
				align : 'center'
			}, {}, {
				header : '分组1-3',
				colspan : 5,
				align : 'center'
			}];

	// 如果使用的是ColumnHeaderGroup.js 这地方需要改一下
//	var group = new Ext.ux.grid.ColumnHeaderGroup({
//		rows : [group1]
//	});
	var group = new Ext.ux.plugins.GroupHeaderGrid({
				rows : [group1]
			});

	// 定义自动当前页行号
	var rownum = new Ext.grid.RowNumberer({
				header : 'NO',
				width : 28
			});
	// 定义列模型
	var cm = new Ext.grid.ColumnModel([rownum, {
		header : '项目ID', // 列标题
		dataIndex : 'xmid', // 数据索引:和Store模型对应
		sortable : true
			// 是否可排序
		}, {
		header : '项目名称',
		dataIndex : 'xmmc',
		sortable : true,
		width : 200
	}, {
		header : '项目热键',
		dataIndex : 'xmrj'
	}, {
		header : '规格',
		dataIndex : 'gg'
	}, {
		dataIndex : 'dw',
		align:'center',
		fixed:true,
		width : 60
	}, {
		header : '启用状态',
		dataIndex : 'qybz',
		// 演示render的用法(代码转换,该render由<G4Studio:ext.codeRender/>标签生成)
		renderer : QYBZRender,
		width : 60
	}, {
		header : '剂型',
		dataIndex : 'jx',
		width : 60
	}, {
		header : '产地',
		dataIndex : 'cd',
		width : 200
	}, {
		header : '医院编码',
		dataIndex : 'yybm'
	}, {
		header : '更改时间',
		dataIndex : 'ggsj'
	}]);

	/**
	 * 数据存储
	 */
	var store = new Ext.data.Store({
				// 获取数据的方式
				proxy : new Ext.data.HttpProxy({
							url : 'gridDemo.do?reqCode=querySfxmDatas'
						}),
				// 数据读取器
				reader : new Ext.data.JsonReader({
							totalProperty : 'TOTALCOUNT', // 记录总数
							root : 'ROOT' // Json中的列表数据根节点
						}, [{
								name : 'xmid' // Json中的属性Key值
							}, {
								name : 'sfdlbm'
							}, {
								name : 'xmmc'
							}, {
								name : 'xmrj'
							}, {
								name : 'gg'
							}, {
								name : 'dw'
							}, {
								name : 'qybz'
							}, {
								name : 'jx'
							}, {
								name : 'cd'
							}, {
								name : 'yybm'
							}, {
								name : 'ggsj'
							}])
			});

	// 表格实例
	var grid = new Ext.grid.GridPanel({
		// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
		title : '<span class="commoncss">表头分组</span>',
		height : 500,
		frame : true,
		autoScroll : true,
		region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
		margins : '3 3 3 3',
		store : store, // 数据存储
		stripeRows : true, // 斑马线
		cm : cm, // 列模型
		plugins : group,
		viewConfig : {
			// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
			// forceFit : true
		},
		loadMask : {
			msg : '正在加载表格数据,请稍等...'
		}
	});

运行效果