扩展方法:
$.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. spring融合activitymq-all启动报错的解决办法

    报错信息: nested exception is java.lang.NoSuchMethodError: org.springframework.core.annotation.Annotated ...

  2. 微信开发之自定义菜单--weixin-java-tools

    一.前言 平时在开发微信的过程中,肯定会设计到微信的相关菜单的使用,这次就和大家介绍下如何使用weixin-java-tools来管理菜单 二.自定义菜单分类 1.click:点击推事件用户点击cli ...

  3. 直接拿来用!最火的Android开源项目(二)

    在<直接拿来用!最火的Android开源项目(一)>中,我们详细地介绍了GitHub上最受欢迎的TOP20 Android开源项目,引起了许多读者的热议,作为开发者,你最常用的是哪些开源项 ...

  4. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

  5. javascript快速入门11--正则表达式

    正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 替换文本.可以在文档中使用一个正则表达式来标 ...

  6. 面试题:Java中值传递和引用传递的问题

    随便写写留着自己看. 首先,Java的参数传递,不管是基本数据类型还是引用类型的参数,都是按值传递,没有按引用传递! 当一个实例对象作为参数被传递到方法中时,参数的值就是该对象的引用的一个副本.指向同 ...

  7. Python图像处理(8):边缘检測

    快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 此前已经得到了单个区域植株图像,接下来似乎应该尝试对这些区域进行分类识别.通过外形和叶脉进行植物种 ...

  8. ubuntu i3 xterm中文输入显示问题解决

    i3config 配置 !启动fcitx输入法管理 exec fcitx -d Xresource配置 !设置输入法管理器为fcitx xterm*inputMethod: fcitx !设置英文字体 ...

  9. union中的成员不能有构造函数

    最近在做项目的CTA测试,快被折腾死了..... -_- 项目中用到的开源库AllJoyn在编译时报错: In file included :, , , , , , , : ./Target/:: e ...

  10. 在windows下部署laravel项目的步骤

    laravel版本:5.4 php版本:7.1以上,我用的php7.2.7 1.代码库下载laravel源码,放在你自己的运行目录下 2.配置hosts域名及 apache域名配置 3.安装compo ...