1. $.extend($.fn.datagrid.methods, {
  2. autoMergeCells: function (jq, fields) {
  3. return jq.each(function () {
  4. var target = $(this);
  5.  
  6. if (!fields) {
  7. fields = target.datagrid("getColumnFields");
  8. }
  9.  
  10. var rows = target.datagrid("getRows");
  11. var i = 0,
  12. j = 0,
  13. temp = {};
  14. for (i; i < rows.length; i++) {
  15. var row = rows[i];
  16. j = 0;
  17.  
  18. for (j; j < fields.length; j++) {
  19. var field = fields[j];
  20. var tf = temp[field];
  21.  
  22. if (!tf) {
  23. tf = temp[field] = {};
  24. tf[row[field]] = [i];
  25. } else {
  26. var tfv = tf[row[field]];
  27. if (tfv) {
  28. tfv.push(i);
  29. } else {
  30. tfv = tf[row[field]] = [i];
  31. }
  32. }
  33. }
  34. }
  35.  
  36. $.each(temp, function (field, colunm) {
  37. $.each(colunm, function () {
  38. var group = this;
  39.  
  40. if (group.length > 1) {
  41. var before,
  42. after,
  43. megerIndex = group[0];
  44.  
  45. for (var i = 0; i < group.length; i++) {
  46. before = group[i];
  47. after = group[i + 1];
  48.  
  49. if (after && (after - before) == 1) {
  50. continue;
  51. }
  52.  
  53. var rowspan = before - megerIndex + 1;
  54.  
  55. if (rowspan > 1) {
  56. target.datagrid('mergeCells', {
  57. index: megerIndex,
  58. field: field,
  59. rowspan: rowspan
  60. });
  61. }
  62.  
  63. if (after && (after - before) != 1) {
  64. megerIndex = after;
  65. }
  66. }
  67. }
  68. });
  69. });
  70. });
  71. }
  72. });

使用方法:

  1. $('#grid).datagrid("autoMergeCells", ['field1', 'field2','field3',……]);

easyui datagrid 合并相同行的更多相关文章

  1. easyui-datagrid合并相同行功能扩展

    //合并相同行$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(func ...

  2. Bootstrap-table实现动态合并相同行(表格同名合并)

    写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...

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

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

  4. easyui datagrid 合并单元格

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

  5. EasyUI DataGrid合并单元

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

  6. easyui datagrid合并相同数据的单元格。

    /** * 根据作用域填充单元格 */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(&quo ...

  7. Bootstrap-table实现动态合并相同行

    Bootstrap-table  表格合并相同名字的列 @编写function() /** * 合并行 * @param data 原始数据(在服务端完成排序) * @param fieldName ...

  8. awk之特征相同行的合并 ~转

    awk之特征相同行的合并 文本: 1001  hisk01 1001  hisk02 1001  hisk03 1002  hisk04 1002  hisk05 1002  hisk06 1003 ...

  9. JQuery EasyUI DataGrid动态合并(标题)单元) 一

    JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...

随机推荐

  1. 树莓派中将caplock映射为esc键

    据说,喜欢vimer都呵caplock有仇,明明caplock占着原来esc的位置,却从来没有起到应有的作用,你说气人吗,没关系,我改啊:将下面语句加入到.bashrc中,启动即可xmodmap -e ...

  2. intel官方的手册

    最近在学习汇编语言,需要用到intel的手册,无论是csdn还是其他的,都要下载币,还不便宜,也很老的资料了. 直接到这个地址:https://software.intel.com/en-us/art ...

  3. 访问项目时报错org.apache.jasper.JasperException: java.lang.NullPointerException

    错误信息:org.apache.jasper.JasperException: java.lang.NullPointerException 原因:项目依赖的jar包和tomcat容器的依赖jar包有 ...

  4. 重读APUE(2)-read返回值少于要求读取字节数

    返回值: 成功返回读到的字节数,如果达到文件尾,则返回0:注意:如果有数据第一次读取会返回全部读到的字节数,下一次读取才会返回0: 出错返回-1: 返回值少于要求读取字节数的情况: 1. 读取普通文件 ...

  5. Flutter移动电商实战 --(36)FlutterToast插件使用

    https://github.com/PonnamKarthik/FlutterToast fluttertoast: ^3.0.1 category_page.dart页面添加引用 import ' ...

  6. ubuntu 切换默认python版本

    现在的python项目都是基于python3的了,再用ubuntu的时候默认的版本是py2的,所以想切换到py3上: 打开终端: sudo update-alternatives --install ...

  7. kotlin异常类

    kotlin中所有的错误异常类都是throwable的自雷,没各一次都能带有一个错误消息,调用堆栈,以及可选的错误原因,要抛出异常,可以使用throw表达式 throw myException(&qu ...

  8. 从零搭建配置Cuckoo Sandbox

    1.安装依赖 $ sudo apt-get install git mongodb libffi-dev build-essential python-django python python-dev ...

  9. MySQL表的创建与维护

    一.导入测试数据 [root@server ~]# wget https://launchpadlibrarian.net/24493586/employees_db-full-1.0.6.tar.b ...

  10. 移动应用端的支付宝支付php开发流程

    1.https://openhome.alipay.com/ 支付宝开放平台并创建应用,审核通过后并签约app支付拿到pid 2.按照官方文档用 [RSA签名验签工具.bat]生成应用公钥和私钥 3. ...