1、html部分:

<div id="table1"></div>

2、js部分:

$('#table1').datagrid({
data : data,
loadFilter: pagerFilter,
height: $(document).height()*0.87,
striped: true,
selectOnCheck: true,
pagination: true,
pageSize:10,
pageList:[10,20,30,40,50],
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
$('#table1').datagrid("autoMergeCells", ['userid']);
}
},
columns: [
[{
field: 'userid',
title: '列名',
width: '15%',
align: 'center'
},{
field: 'username',
title: '列名',
width: '15%',
align: 'center'
}]
});
autoMergeCells方法扩展了datagrid的方法,实现如下:
/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 jq 要合并table的id
* 参数 fields 要合并的列,用逗号分隔(例如:"field1,field2,field3,...");
*/
$.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;
}
}
}
});
});
});
}
});

easyUI---datagrid合并单元格代码实现的更多相关文章

  1. JS实现EasyUI ,Datagrid,合并单元格功能

    为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...

  2. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

  3. easyui datagrid单击单元格选择此列

    示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...

  4. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  5. Silverlight的DataGrid合并单元格

    现在也不知道还有没有同学做Silverlight开发了,我是一个Silverlight菜鸟,遇到问题也很难百度查到.就简单的记录一下这两天遇到的问题,并做了一个简单的小Demo,希望能够帮助到其他同学 ...

  6. WPF DataGrid 合并单元格

    在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...

  7. EasyUI DataGrid合并单元

    <table id="tt"></table> $('#tt').datagrid({     title:'Merge Cells',     iconC ...

  8. DataGrid合并单元格(wpf)

    在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...

  9. Easyui datagrid 扩展单元格textarea editor

    datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...

随机推荐

  1. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

  2. C语言单向链表

    1,为什么要用到链表 数组作为存放同类数据的集合,给我们在程序设计时带来很多的方便,增加了灵活性.但数组也同样存在一些弊病.如数组的大小在定义时要事先规定,不能在程序中进行调整,这样一来,在程序设计中 ...

  3. javascript 对象-13

    对象 无序属性的集合,属性可以包含基本值.对象或者函数,简单理解为对象是若干属性的集合:我们常说的面向对象(oop)编程其实是指的一种编码的思想,简单理解为用对象来封装数据,利用封装.继承.多态对代码 ...

  4. hash算法 (hashmap 实现原理)

    Hash ,一般翻译做" 散列" ,也有直接音译为" 哈希" 的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出 ...

  5. Win10下安装RabbitMQ以及基本知识学习

    一.为什么选择RabbitMQ?      先说一下场景,这是我们公司遇到,当然我这里不做业务评价哈?虽然我知道他很不合理,但是我是无能为力的.APP端部分注册是Java开发的系统,然后业务端是C#开 ...

  6. Actor-ES框架:Ray

    并发 1. 并发和并行 并发:两个或多个任务在同一时间段内运行.关注点在任务分割. 并行:两个或多个任务在同一时刻同时运行.关注点在同时执行. 本文大多数情况下不会严格区分这两个概念,默认并发就是指并 ...

  7. Spark算子--leftOuterJoin和rightOuterJoin

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/cb71cd3ac5d7965a2c61891659264d54.html leftOuterJoin和righ ...

  8. 解决不同操作系统下git换行符一致性问题

    一.不同操系统下的换行符CR回车 LF换行Windows/Dos CRLF \r\nLinux/Unix LF \nMacOS CR \r二.解决方法 打卡git bash,设置core.autocr ...

  9. 话说TP框架里的Vendor这目录是干什么用的啊?类库扩展thinkphp3.1版本

    类库扩展包括基类库扩展.应用类库扩展和第三方类库扩展,所有扩展类库不会自动加载,需要手动加载或者定义别名和配置自动加载(详细可以参考4.2.3类库导入和4.2.5自动加载). 1 基类库扩展 目前支持 ...

  10. asp.net -mvc框架复习(11)-基于三层架构与MVC实现完整的用户登录

    一.先从M部分写起(Modles\DAL\BLL) 1.Modles 实体类:上次实体类已经搞定. 2.DAL 数据访问类类 (1)通用数据数据访问类: A:  先编写数据连接字符串,写到网站根目录W ...