一.autoMergeCellAndCells实现效果

调用方法:

function onLoadSuccess(data){

    $(this).datagrid("autoMergeCellAndCells",['productid','productname']);
}

 

//所有列进行合并操作
//$(this).datagrid("autoMergeCellAndCells");
//指定列进行合并操作
//$(this).datagrid("autoMergeCellAndCells", ['productid','productname']);
$(this).datagrid("autoMergeCellAndCells",['productid','productname']);

二.autoMergeCells实现效果

调用方法:

function onLoadSuccess(data){
$(this).datagrid("autoMergeCells",['productid','productname']);
} //所有列进行合并操作
//$(this).datagrid("autoMergeCells");
//指定列进行合并操作
//$(this).datagrid("autoMergeCells", ['productid','productname']);
$(this).datagrid("autoMergeCells",['productid','productname']);

三.扩展

$.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;
}
}
}
});
});
});
},
autoMergeCellAndCells : function (jq, fields) {
return jq.each(function () {
var target = $(this);
if (!fields) {
fields = target.datagrid("getColumnFields");
}
var cfield = fields[0];
if (!cfield) {
return;
}
var rows = target.datagrid("getRows");
var i = 0,
j = 0,
temp = {};
for (i; i < rows.length; i++) {
var row = rows[i];
j = 0;
var tf = temp[cfield];
if (!tf) {
tf = temp[cfield] = {};
tf[row[cfield]] = [i];

} else {
var tfv = tf[row[cfield]];
if (tfv) {
tfv.push(i);
} else {
tfv = tf[row[cfield]] = [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) {
for(var j=0;j<fields.length;j++){
target.datagrid('mergeCells', {
index : megerIndex,
field : fields[j],
rowspan : rowspan
});
}
}
if (after && (after - before) != 1) {
megerIndex = after;
}
}
}
});
});
});
}

});

扩展-Easyui Datagrid相同连续列合并扩展(一)的更多相关文章

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

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

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

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

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

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

  4. EasyUI DataGrid 相同连续列合并

    扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...

  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,添加数据loading遮罩效果代码 --来自网摘收集

    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...

  9. jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

随机推荐

  1. KineticJS教程(10)

    KineticJS教程(10) 作者: ysm  10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...

  2. HTTP 头缓存Last-Modified,ETag,Expires

    http://www.jdon.com/40381 Last-Modified和Expires针对浏览器,而ETag则与客户端无关,所以可适合REST架构中.两者都应用在浏览器端的区别是:Expire ...

  3. Hadoop之MapReduce命令

    概述 全部的Hadoop命令都通过bin/mapred脚本调用. 在没有不论什么參数的情况下.执行mapred脚本将打印该命令描写叙述. 使用:mapred [--config confdir] CO ...

  4. 2.4.1 用NPOI操作EXCEL关于HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2)的参数

    NPOI教程:http://www.cnblogs.com/atao/archive/2009/11/15/1603528.html 之所有说NPOI强大,是因为常用的Excel操作她都可以通过编程的 ...

  5. java-----instanceof与getClass的区别

    在比较一个类是否和另一个类属于同一个类实例的时候,我们通常可以采用instanceof和getClass两种方法通过两者是否相等来判断,但是两者在判断上面是有差别的,下面从代码中看看区别: publi ...

  6. 【LeetCode】103. Binary Tree Zigzag Level Order Traversal

    Binary Tree Zigzag Level Order Traversal Given a binary tree, return the zigzag level order traversa ...

  7. Redis全方位讲解--主从复制(转载)

    前言 前面介绍了redis持久化和容灾备份,这篇会介绍redis主从复制和redis持久化在主从复制中的一些应用.因为本人没有那么多服务器或机器,所以这里主要介绍下如何在docker容器中搭建主从复制 ...

  8. SQL SERVER 2005允许自定义聚合函数

    不多说了,说明后面是完整的代码,用来将字符串型的字段的各行的值拼成一个大字符串,也就是通常所说的Concat 例如有如下表dict  ID  NAME  CATEGORY  1 RED  COLOR  ...

  9. SQLServer 2008中SQL增强之三 Merge(在一条语句中使用

    SQLServer 2008中SQL增强之三 Merge(在一条语句中使用Insert,Update,Delete)   SQL Server 2008提供了一个增强的SQL命令Merge,用法参看M ...

  10. DevExpress中GridControl列转义的实现方法

    /// <summary> /// CustomColumnDisplayText Helper /// </summary> /// <param name=" ...