1.目标

1.1表格初始化完成后,已经自动合并好需要合并的行;

1.2当点击字段排序后,重新进行合并;

2.实现

2.1 引入插件

/**
* 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;
}
}
}
});
});
});
}
});

2.2html代码

<table id="simpleDgId" style="height: 300px" />

2.3js代码

var sortFlag = false;
$('#simpleDgId').datagrid({
url:"testController.do?datagrid",
fitColumns:true,
singleSelect:true,
remoteSort: false,
columns:[[
{field:"age",title:"年龄",width:25,align:'center',sortable:true},
{field:"userName",title:"名称",width:25,align:'center',sortable:true},
{field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
]],
onSortColumn:function(sort, order){
sortFlag = true;
if("userName"==sort){
$(this).datagrid("autoMergeCells",[sort]);
}else{
$(this).datagrid("autoMergeCells");
}
},
onLoadSuccess: function(data){
if(!sortFlag) $(this).datagrid("autoMergeCells");
}
});

easyui-datagrid自动合并行的更多相关文章

  1. easyui生成合并行,合计计算价格

    easyui生成合并行,合计计算价格 注:本文来源: 原创 一:图样你效果图 二:代码实现 1:datagrid 列展示: window.dataGrid = $("#dataGrid&qu ...

  2. 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码

    之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html   大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...

  3. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  4. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  5. 反射实体自动生成EasyUi DataGrid模板

    用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...

  6. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  7. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  8. 初识 easyui datagrid

    首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...

  9. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

随机推荐

  1. 原创教程:《metasploit新手指南》介绍及下载

    原创教程:<metasploit新手指南>介绍及下载 1.1 作者简介 这份教程并不是“玄魂工作室”原创,但是我还是要力推给大家.相比那些一连几年都在问“我怎么才能入门”的人而言,我们更欣 ...

  2. JavaScript使用DeviceOne开发实战(三)仿微信应用

    这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际 ...

  3. kafka的一些认识

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com   近来无事研究了一下kafka,并且用golang连接kafka做了producer和consumer的简单测试 ...

  4. Ubuntu环境搭建系列—JavaEE篇

    恩,其实我是一时兴起,所以就写了目前这几篇环境的博文,希望能给自己做一个笔记,同时也能够给一些新手带来一些帮助,不会在配置方面那么迷茫.本篇文章主要就是针对Java web开发进行环境搭建. 一.To ...

  5. Windows进程通信 -- 共享内存(1)

    共享内存的方式原理就是将一份物理内存映射到不同进程各自的虚拟地址空间上,这样每个进程都可以读取同一份数据,从而实现进程通信.因为是通过内存操作实现通信,因此是一种最高效的数据交换方法. 共享内存在 W ...

  6. redis系列-redis的使用场景

    redis越来越受大家欢迎,提升下速度,做下缓存,完成KPI之利器呀.翻译一篇文章<<How to take advantage of Redis just adding it to yo ...

  7. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. redis常用命令小结

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/107.html?1455867352 1.redis-benchmarkr ...

  9. 开发人员应该对IIS理论层的知识了解的多一些~第四讲 HttpModule中的几大事件

    返回目录 本文主要介绍HttpModule,它在一个网页请求过程中是一个怎样的过程是我们要知道的,在网页加载过程中HttpModule在何时被执行也是我们要知道的,以及,HttpModule在网页请求 ...

  10. 手把手教你在VirtualBox中与主机共享文件夹

    安装VirtualBox为了共享文件夹,折腾了一晚上!网上的很多资料都不是很全面,这里就全面的总结一下,如果有其他的疑问,可以留言多多交流. VirtualBox下载地址,版本为5.1.2 设置共享文 ...