下载APP 编程狮,随时随地学编程
返回 首页

jQuery EasyUI 教程

jQuery EasyUI 数据网格 – 合并单元格

jQuery EasyUI 数据网格 - 合并单元格

本节将介绍jQuery EasyUI数据网格(datagrid)如何对单元格进行合并。

调用'mergeCells'方法就可以合并数据网格单元格,并传入合并信息参数,该方法告诉数据网格如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被隐藏。

创建数据网格(DataGrid)

	<table id="tt" title="Merge Cells" style="width:550px;height:250px" 			url="data/datagrid_data.json" 			singleSelect="true" iconCls="icon-save" rownumbers="true" 			idField="itemid" pagination="true">
		<thead frozen="true">
			<tr>
				<th field="productid" width="80" formatter="formatProduct">Product ID</th>
				<th field="itemid" width="100">Item ID</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th colspan="2">Price</th>
				<th rowspan="2" field="attr1" width="150">Attribute</th>
				<th rowspan="2" field="status" width="60" align="center">Stauts</th>
			</tr>
			<tr>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
			</tr>
		</thead>
	</table>

合并单元格

当数据加载之后,我们合并数据网格中的一些单元格,所以放置下面的代码在onLoadSuccess回调函数中。

	$('#tt').datagrid({
		onLoadSuccess:function(){
			var merges = [{
				index:2,
				rowspan:2
			},{
				index:5,
				rowspan:2
			},{
				index:7,
				rowspan:2
			}];
			for(var i=0; i<merges.length; i++) 				
                            $('#tt').datagrid('mergeCells',{ 					
                                index:merges[i].index, 					
                                field:'productid', 					
                                rowspan:merges[i].rowspan 				
                            }); 		
               } 	
        }); 

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid13.zip

目录

jQuery EasyUI 教程

jQuery EasyUI 简介

jEasyUI 应用

jQuery EasyUI 应用 – 创建 CRUD 应用
jQuery EasyUI 应用 – 创建 CRUD 数据网格
jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用
jQuery EasyUI 应用 – 创建 RSS Feed 阅读器

jEasyUI 拖放

jQuery EasyUI 拖放 – 基本的拖动和放置
jQuery EasyUI 拖放 – 创建拖放的购物车
jQuery EasyUI 拖放 – 创建学校课程表

jEasyUI 菜单与按钮

jQuery EasyUI 菜单与按钮 – 创建简单的菜单
jQuery EasyUI 菜单与按钮 – 创建链接按钮
jQuery EasyUI 菜单与按钮 – 创建菜单按钮
jQuery EasyUI 菜单与按钮 – 创建分割按钮

jEasyUI 布局

jQuery EasyUI 布局 – 为网页创建边框布局
jQuery EasyUI 布局 – 在面板中创建复杂布局
jQuery EasyUI 布局 – 创建折叠面板
jQuery EasyUI 布局 – 创建标签页(Tabs)
jQuery EasyUI 布局 – 动态添加标签页(Tabs)
jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)
jQuery EasyUI 布局 – 创建 XP 风格左侧面板

jEasyUI 数据网格

jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格
jQuery EasyUI 数据网格 – 取得选中行数据
jQuery EasyUI 数据网格 – 添加查询功能
jQuery EasyUI 数据网格 – 添加工具栏
jQuery EasyUI 数据网格 – 创建复杂工具栏
jQuery EasyUI 数据网格 – 设置冻结列
jQuery EasyUI 数据网格 – 动态改变列
jQuery EasyUI 数据网格 – 格式化列
jQuery EasyUI 数据网格 – 设置排序
jQuery EasyUI 数据网格 – 自定义排序
jQuery EasyUI 数据网格 – 创建列组合
jQuery EasyUI 数据网格 – 添加复选框
jQuery EasyUI 数据网格 – 自定义分页
jQuery EasyUI 数据网格 – 启用行内编辑
jQuery EasyUI 数据网格 – 扩展编辑器
jQuery EasyUI 数据网格 – 列运算
jQuery EasyUI 数据网格 – 合并单元格
jQuery EasyUI 数据网格 – 创建自定义视图
jQuery EasyUI 数据网格 – 创建页脚摘要
jQuery EasyUI 数据网格 – 条件设置行背景颜色
jQuery EasyUI 数据网格 – 创建属性网格
jQuery EasyUI 数据网格 – 扩展行显示细节
jQuery EasyUI 数据网格 – 创建子网格
jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据
jQuery EasyUI 数据网格 – 添加分页组件

jEasyUI 窗口

jQuery EasyUI 窗口 – 自定义窗口工具栏
jQuery EasyUI 窗口 – 窗口与布局
jQuery EasyUI 窗口 – 创建对话框
jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框

jEasyUI 树形菜单

jQuery EasyUI 树形菜单 – 使用标记创建树形菜单
jQuery EasyUI 树形菜单 – 创建异步树形菜单
jQuery EasyUI 树形菜单 – 树形菜单添加节点
jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 – 树形菜单拖放控制
jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 – 创建基础树形网格
jQuery EasyUI 树形菜单 – 创建复杂树形网格
jQuery EasyUI 树形菜单 – 树形网格动态加载
jQuery EasyUI 树形菜单 – 树形网格添加分页
jQuery EasyUI 树形菜单 – 树形网格惰性加载节点

jEasyUI 表单

jQuery EasyUI 表单 – 创建异步提交表单
jQuery EasyUI 表单 – 表单验证
jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)
jQuery EasyUI 表单 – 格式化下拉框(ComboBox)
jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)

jEasyUI 参考手册

jQuery EasyUI 插件
jQuery EasyUI 扩展

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }