扩展方法:
$.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事件里面进行调用,可以实现数据加载完成后,自动合并。也可以手动调用该方法。

$('#dg').datagrid({
url: 'datagrid_data.json',
onLoadSuccess: function(data) {
//所有列进行合并操作
//$(this).datagrid("autoMergeCells");
//指定列进行合并操作
$(this).datagrid("autoMergeCells", ['groupId', 'commId']);
}
});

EasyUI DataGrid 相同连续列合并的更多相关文章

  1. 扩展-Easyui Datagrid相同连续列合并扩展(一)

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  2. Easyui Datagrid相同连续列合并扩展(二)

    JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...

  3. Easyui Datagrid相同连续列合并扩展(三)

    function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || fields == null | ...

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

    /** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...

  5. Easyui Datagrid相同连续列合Demo之三

    效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  7. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  8. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

  9. easyui datagrid自定义按钮列,即最后面的操作列(转)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...

随机推荐

  1. display:flex;多行多列布局学习

    从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高: 首先来比较一下布局方式的更新意义: table布局: 优点:1.兼容性好,ie6.ie ...

  2. JS版汉字与拼音互转终极方案,附简单的JS拼音输入法

    原文:http://www.cnblogs.com/liuxianan/p/pinyinjs.html 前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多 ...

  3. C++11简要介绍

    概述  C++1x (本教程中指 C++11/14, 甚至 C++17) 为传统 C++ 注入的大量特性使得整个 C++ 变得更加像一门现代化的语言.C++1x 不仅仅增强了 C++ 语言自身的可用性 ...

  4. python获取系统信息,

    1 操作系统系统综合信息cur_sysinfo=platform.uname()浏览器信息cur_browserinfo=self.driver.capabilities['version']浏览器新 ...

  5. Linux Bash严重漏洞修复方法

    日前Linux官方内置Bash中新发现一个非常严重安全漏洞,黑客可以利用该Bash漏洞完全控制目标系统并发起攻击,为了避免Linux服务器受影响,就要尽快修补该漏洞了.(漏洞参考https://acc ...

  6. cadvisor详解

    一. cadvisor和k8s的耦合 cadvisor是一个谷歌开发的容器监控工具,它被内嵌到k8s中作为k8s的监控组件.现在将k8s中的cadvisor实现分析一下. k8s中和cadvisor的 ...

  7. nginx linux 安装

    nginx linux 安装 进入http://nginx.org/en/download.html 下载 n  gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gc ...

  8. LintCode - Merge Two Sorted List

    LintCode - Merge Two Sorted Lists LintCode - Merge Two Sorted Lists Web Link Description Code - C Ti ...

  9. EasyBoot使用方法

    1 修改背景图片直接替换掉EasyBoot\disk1\ezboot目录下面的BACK.BMP文件即可.但是限于DOS功能限制,只能使用640×480像素,256位色的BMP图片.   2 鼠标左键单 ...

  10. linux/unix核心设计思想

    1) 程序应该小而专一,程序应该尽量的小,且仅仅专注于一件事上.不要开发那些看起来实用可是90%的情况都用不到的特性: 2) 程序不仅仅要考虑性能, 程序的可移植性更重要,shell和perl.pyt ...