`
mamacmm
  • 浏览: 196910 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论

EasyUI-datagrid-自动合并单元格

阅读更多

1.目标

  1.1表格初始化完成后,已经自动合并好需要合并的行;

  1.2当点击字段排序后,重新进行合并;

 

2.实现

  2.1 引入插件

    

/**
 * author ____′↘夏悸
 * create date 2012-11-5
 *
 **/
$.extend($.fn.datagrid.methods, {
	autoMergeCells : function (jq, fields) {
		return jq.each(function () {
			var target = $(this);
			if (!fields) {
				fields = target.datagrid("getColumnFields");
			}
			var rows = target.datagrid("getRows");
			var i = 0,
			j = 0,
			temp = {};
			for (i; i < rows.length; i++) {
				var row = rows[i];
				j = 0;
				for (j; j < fields.length; j++) {
					var field = fields[j];
					var tf = temp[field];
					if (!tf) {
						tf = temp[field] = {};
						tf[row[field]] = [i];
					} else {
						var tfv = tf[row[field]];
						if (tfv) {
							tfv.push(i);
						} else {
							tfv = tf[row[field]] = [i];
						}
					}
				}
			}
			$.each(temp, function (field, colunm) {
				$.each(colunm, function () {
					var group = this;
					
					if (group.length > 1) {
						var before,
						after,
						megerIndex = group[0];
						for (var i = 0; i < group.length; i++) {
							before = group[i];
							after = group[i + 1];
							if (after && (after - before) == 1) {
								continue;
							}
							var rowspan = before - megerIndex + 1;
							if (rowspan > 1) {
								target.datagrid('mergeCells', {
									index : megerIndex,
									field : field,
									rowspan : rowspan
								});
							}
							if (after && (after - before) != 1) {
								megerIndex = after;
							}
						}
					}
				});
			});
		});
	}
});

 

  2.2html代码

    

<table id="simpleDgId" style="height: 300px" />

  2.3js代码

    

var sortFlag = false;
	$('#simpleDgId').datagrid({
		url:"testController.do?datagrid",
		fitColumns:true,
		singleSelect:true,
		remoteSort: false,
		columns:[[
		          {field:"age",title:"年龄",width:25,align:'center',sortable:true},
		          {field:"userName",title:"名称",width:25,align:'center',sortable:true},
		          {field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
		]],
		onSortColumn:function(sort, order){
			sortFlag = true;
			if("userName"==sort){
				$(this).datagrid("autoMergeCells",[sort]);
			}else{
				$(this).datagrid("autoMergeCells");
			}
		},
		onLoadSuccess: function(data){
			if(!sortFlag) $(this).datagrid("autoMergeCells");
		}
	});

 

  2.4后台

     url:"testController.do?datagrid"

     后台数据就是普通的表格数据,这里就不赘述了

  

  2.5效果



 

 

 

 

 

 

 

 

 

  • 大小: 110.4 KB
  • 大小: 124.7 KB
  • 大小: 139 KB
1
3
分享到:
评论

相关推荐

    easyUI datagrid合并单元格(支持子对象的属性)

    easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);

    DataGrid表头合并和单元格内容合并-升级版

    DataGrid表头合并和单元格内容合并-升级版

    datagrid-export.js

    该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得

    easyui datagrid

    easyui datagrid 单元格合并及合并单元格的背景设置

    datagrid-export.zip

    该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得

    easyui-bufferview.js(修改后)

    bufferview滚动时,滚动前后合并单元格修改, 要在自己的文件中,加入单元格合并方法: function _setDefaultMearge(rows) { var rows = $("#tt").datagrid('getRows'); var len = rows.length; var preIndex = 0...

    EasyUI tutorial 中文版 chm

    easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的...

    基于easyui checkbox 的一些操作处理方法

    1、获取已勾选的行: var rows = $(‘#datagrid’).datagrid(‘getChecked’); 2、判断checkbox是否全选: ...以上这篇基于easyui checkbox 的一些操作处理方法就是小编分享给大家的全部内容了,希望能给大家一个参

    easyui structs java环境下多级单元格合并及完美导出excel

    easyui structs java环境下多列单元格合并及完美导出excel,合并采用递归方式,例如第一列相同的合并,第二列的合并依据第一列确定,以此类推。网上的资料只能合并一列。完美导出到excel,保留了多列合并的结果,一...

    datagrid 4种解决table对齐

    datagrid 4种解决方案 表头与列对齐

    jQuery EasyUI 1.3 API 中文教程

    合并数据表格单元格 创建自定义视图 创建数据表格页底摘要 条件设置数据表行背景 创建折叠数据表格 折叠数据表格应用 折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单...

    Jquery_EasyUI教程

    o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52...

    jQuery_EasyUI教程

    o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52 • 8.3 ...

Global site tag (gtag.js) - Google Analytics