`

jQuery Easyui Datagrid相同连续列合并扩展

 
阅读更多
转载来自:http://www.jeasyuicn.com/jquery-easyui-datagrid-the-same-continuous-column-with-extended.html
/**
 * 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;
							}
						}
					}
				});
			});
		});
	}
});


用法:
   在datagrid的onLoadSuccess事件里面进行调用,可以实现数据加载完成后,自动合并。也可以手动调用该方法。
onLoadSuccess:function(){
      //所有列进行合并操作
      //$(this).datagrid("autoMergeCells");
      //指定列进行合并操作
      $(this).datagrid("autoMergeCells",['itemid','productid']);
    }
分享到:
评论

相关推荐

    jquery.easyui.datagrid扩展合并列

    jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);

    easyui datagrid 合并行扩展

    easyui并没有合并行的具体方法,在开发过程中有时候会遇到一行带多行的需求,本代码为满足该需求写的easyUI扩展,代码带注释

    jquery easyui datagrid demo 详解

    在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...

    jquery-easyui-1.5完整源码.zip

    《jQuery EasyUI 1.5 完整源码解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如表格、对话框、菜单、按钮等,大大简化了Web应用程序的开发。在"jquery-easyui-1.5完整...

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery EasyUI 是一个基于 jQuery 的前端 UI 框架,它提供了一套可扩展的组件,其中 datagrid 组件就是用于展示数据表格的组件。然而,在实际应用中,有时候从服务器查询不到相关数据,这种情况下,我们通常需要在 ...

    jQuery EasyUI网络教程

    jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列可扩展的组件和插件,使得开发者能够快速地使用jQuery开发出具有专业外观的用户界面。在给定文件的【部分内容】中,我们可以看到对jQuery EasyUI的一些...

    EasyUI tutorial 中文版 chm

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

    jquery-easyui-1.4.2源码无压缩

    - `jquery.easyui.min.js` 是主要的合并文件,包含了所有组件的代码,而 `jquery.easyui.js` 是未压缩的版本,便于阅读和调试。 5. **组件API** - 每个组件都有一系列的API方法,如 `.dialog('open')` 和 `....

    easyui合并相同行

    3. **自定义模板**:由于EasyUI默认的表格渲染可能无法直接实现相同行的合并,所以可能需要自定义列的模板(`formatter`函数),在模板中判断并合并相同数据。 4. **扩展功能**:可能涉及到EasyUI的扩展插件,例如...

    Juery easyUi edatagride

    **jQuery EasyUI eDataGrid** 是一个基于jQuery和EasyUI框架的数据网格组件,它扩展了基本的DataGrid功能,提供了更丰富的特性和交互性。EasyUI是一个轻量级的前端开发框架,它使得构建用户界面变得简单快捷。在这个...

    datagrid-export.zip

    首先,EasyUI是一个基于jQuery的前端框架,它提供了大量的UI组件,如datagrid、dialog、menu等,用于构建用户界面。其中,datagrid是一个强大的表格控件,能够处理大量数据,支持分页、排序、过滤等功能。在这个场景...

    Easyui指定列合并.rar_源码

    在分析和学习"Easyui指定列合并"的源码时,我们可以深入理解EasyUI的内部工作原理,以及如何利用它的API和jQuery的灵活性来扩展其功能。这种技能对于前端开发者来说非常宝贵,可以帮助他们在项目中实现更高效、更...

    jquery-easyui-1.3.2包含EasyUI官方API中文版.zip

    《jQuery EasyUI 1.3.2:打造高效前端界面的实用框架》 jQuery EasyUI 是一款基于 jQuery 的轻量级前端开发框架,它提供了一系列的UI组件,可以帮助开发者快速构建出美观且功能丰富的Web应用界面。这个压缩包...

    jQuery EasyUI

    ### jQuery EasyUI 知识点详解 #### 一、概述 **jQuery EasyUI** 是一个基于 jQuery 的前端 UI 框架,它提供了一系列丰富的用户界面插件,可以帮助开发者快速构建复杂的 Web 应用程序。该框架的目标是简化 HTML、...

    EasyUI 1.3.1动态表格列示例

    EasyUI 是一个基于 jQuery 的前端框架,用于构建用户界面,尤其适用于开发管理类网页应用。在1.3.1版本中,动态表格列的实现是一个常见的需求,这涉及到表格的灵活性和可扩展性,使用户可以根据不同的数据或者权限...

    jQuery EasyUI 1.3 API 中文教程

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

    JQuery-EasyUI技术编写的实例

    `jQuery-EasyUI-edt` 可能是指 EasyUI 的编辑器扩展,它可能提供了一些额外的编辑功能或者增强了原有的组件。通常,这种扩展会包括对文本编辑、代码编辑、富文本编辑等场景的支持,使得在网页上进行数据输入更为便捷...

    easyui学习笔记(九)源码

    - 通过源码,我们可以学习如何扩展 `datagrid` 的功能,例如添加新的事件处理器、自定义列操作或创建自定义插件。 - 要注意的是,由于 `easyui` 的源码可能存在一些拼写错误,因此在学习和使用时,可能需要仔细...

    jquery1.7 api + easyuiapi

    - `$.fn.extend()` 用于扩展jQuery对象的方法,让它们可以应用于所有jQuery选择器。 - `$.extend()` 则用于合并两个或更多对象的属性,创建一个新的对象。 2. **事件绑定的改变** - 在jQuery 1.7中,`live()`, `...

    easyui使用手册

    6. **插件扩展**:EasyUI 允许开发者通过插件扩展其功能,例如日期选择器(datebox)、时间选择器(timespinner)等,了解如何引入和使用这些插件。 7. **主题定制**:学习如何自定义 EasyUI 的主题,改变组件的...

Global site tag (gtag.js) - Google Analytics