一.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. Emacs在RHEL 5上的安装和使用

    1. install latest emacs xz -d emacs-24.3.tar.xz tar xvf emacs-24.3.tar ./configure make make install ...

  2. Visual studio中后期生成事件命令使用

    在做项目是总要把发布后的一些dll拷贝的根网站的bin目录下,为了避免每次都需要手动拷贝可以在 项目的生成事件中写入bat命令,下面的命令只在项目使用的发布配置时执行拷贝, (在生成->配置管理 ...

  3. SLAX初体验

    Slax是一个便捷.便携的Linux操作系统.它的界面既充满时尚感,又可基于不同模块的功能运作.它的界面富有时尚感,并集成了不同的模块的界面.尽 管它的容量十分娇小,Slax依然预载了不少日常应用的软 ...

  4. Java Executor 线程池

  5. 如何连接oracle,mysql, SQL Server数据库(Java版)

    先添加上连接oracle,MySQL的驱动路径和数据库连接URL: MySQL: final String DBDRIVER = "org.gjt.mm.mysql.Driver" ...

  6. win7编程接口的一些变化

    原文链接:http://www.nirsoft.net/articles/windows_7_kernel_architecture_changes.html Windows 7 introduces ...

  7. C#中byte类型转换为double类型

    // Initialize unmanged memory to hold the array. int size = Marshal.SizeOf(bytes[0]) * bytes.Length; ...

  8. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  9. js--在页面元素上(移动到或获取焦点)、鼠标离开(或失去焦点)

    1.onfocus() 和 onblur() 是一对相反的事件 但是他们只支持一部分标签 W3C关于onblur的描述:http://www.w3school.com.cn/jsref/event_o ...

  10. linux实现ssh免密码登录

    linux实现ssh免密码登录 本地系统执行 ssh-keygen -t rsa 命令,生成密钥文件 在相应的目录下查看生成的密钥文件,其中:id_rsa为私钥文件,id_rsa.pub为公钥文件 本 ...