为什么80%的码农都做不了架构师?>>>   

1.合并方法

/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 tableID 要合并table的id
* 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");
*/
function mergeCellsByField(tableID, colList) {
    var ColArray = colList.split(",");
    var tTable = $("#" + tableID);
    var TableRowCnts = tTable.datagrid("getRows").length;
    var tmpA;
    var tmpB;
    var PerTxt = "";
    var CurTxt = "";
    var alertStr = "";
    for (j = ColArray.length - 1; j >= 0; j--) {
        PerTxt = "";
        tmpA = 1;
        tmpB = 0;

for (i = 0; i <= TableRowCnts; i++) {
            if (i == TableRowCnts) {
                CurTxt = "";
            }
            else {
                CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
            }
            if (PerTxt == CurTxt) {
                tmpA += 1;
            }
            else {
                tmpB += tmpA;
               
                tTable.datagrid("mergeCells", {
                    index: i - tmpA,
                    field: ColArray[j],  //合并字段
                    rowspan: tmpA,
                    colspan: null
                });
                tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                    index: i - tmpA,
                    field: "Ideparture",
                    rowspan: tmpA,
                    colspan: null
                });
              
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
}

2.调用合并方法

//呈现列表数据
        $('#List').datagrid({ pagination: true,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    //调用mergeCellsByField()合并单元格
                    mergeCellsByField("tbList", "No");
                }
            }
        });

说明:

mergeCellsByField(tableID, colList) ;

参数 tableID 要合并table的id
参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");

这种方法一般情况下都不会用,因为合并出来的不美观

假如:

1 1 1
1 5 1
1 5 1
1 5 2
1 1 2

如下

1 1 1
5 1
1
2
1 2

由于表格的限制,没法合并第三列了,3个“1”,2个“2”,合并掉,大家就明白怎么不美观了,不适合一般的查阅习惯

哈哈,根据我方法里面的红色部分,以一个为主列,其他根据他的行数合并,噢噢噢噢噢噢。成功啦

非常感谢

http://www.gogogogo.me/development/EasyUI-DataGrid-mergeCells.html

我弄了好多天没搞定,真心的祝你全家健康幸福!!!!

转载于:https://my.oschina.net/garyun/blog/602720

EasyUI DataGrid根据字段动态合并单元格相关推荐

  1. VUE element ui 动态合并单元格问题

    ** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...

  2. easyexcel 动态合并单元格

    easyexcel 动态合并单元格 目前操作excel文档的底层都是用poi来进行的,在早期工作开发过程中,是基于poi,然后对每一个数据单元格进行操作代码编写,后面有一些比较好的开源项目,像easy ...

  3. 动态创建excel文件,动态合并单元格并提供下载

    1.动态生成excel的原因 ** 出现的效果: ** 员工姓名没有自动合并单元格,在http://jxls.sourceforge.net/reference/xls_area.html 上面找了半 ...

  4. 使用EasyExcel 根据单元格数值动态合并单元格

    文章目录 前言 一.实现思路 二.实现步骤 1.拦截策略 2.EasyExcel写操作 前言 使用EasyExcel 根据单元格数值动态合并单元格 开发中遇到一个需求,需要根据Excel表格中单元格的 ...

  5. elementui表格组件动态合并单元格

    直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...

  6. 动态合并单元格行和列方法封装 ~~~起手可用

    在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用 /*** * @param {*} table vue对象, Element-ui Table 插件 ...

  7. JAVA导出excel 动态合并单元格

    JAVA excel合并单元格原生poi 合并后的效果 直接上代码 (该方法为如果指定行的单元格里面的值一致则进行合并,直接粘贴使用即可) ** @param sheet* @param colIdx ...

  8. poi 导出Excel 动态 合并单元格

    public String arrearagePeriodExport(ArrearageParam param) {param.setPageNo(1);param.setPageSize(Inte ...

  9. 根据表格中的数据,动态合并单元格

    1.我们最终要实现这样一个效果 2.在表格上声明span-method方法,并注册相关的函数 <template><el-table:data="tableData&quo ...

最新文章

  1. 读书笔记白帽子讲web安全
  2. mysql 配置文件设置最大链接数 max_connections不生效
  3. [云炬创业基础笔记] 第四章测试12
  4. Makefile中支持的函数大全
  5. python 列表推导式
  6. Big Sur恢复Catalina ? macOS Big Sur降级的三种方法 !
  7. 移动信号突然变成无服务器,为什么移动4G信号突然变成H、E、G就无法上网, 背后的真实原因?...
  8. ios学习8_KVC和字典转模型
  9. html5与css3基础教程课件,揭秘HTML5和CSS3教学幻灯片.ppt
  10. 《iOS 6核心开发手册(第4版)》——1.13节秘诀:从滚动视图中拖动
  11. android消息发送字符串,Android aSmack-如何对文件发送进行自定义消息...
  12. HTML5与传统HTML的区别
  13. java银行排队系统_java--面向对象(一个简单的银行排队系统)原理版
  14. python实现百度语音合成(超详细!!)
  15. 怎么从网上办大流量卡呢?具体步骤小编都给你写好的!
  16. linux断电并重启命令,Linux基本操作:关机 重启
  17. 企业建网站应该这样选网站空间
  18. 快读函数read()
  19. 爬虫获取网易云音乐单曲或歌单实现音乐闹钟
  20. API网关—Ocelot之服务发现

热门文章

  1. kubeasz_使用kubeasz安装K8S集群,不受国内网络环境影响
  2. android java 多线程,Android多线程的四种方式
  3. python pandas DataFrame 修改数据
  4. Centos7 上配置 java JDK1.8
  5. java排序为什么会出现多次排序结果不一样_并发理论基础:指令重排序问题
  6. flask服务器端解析文件包时出现问题,flask + celery 遇到的那些坑
  7. Elasticsearch之Search API
  8. 用python写脚本筛选原创微博_基于python编写的微博应用
  9. 大佬教你怎样防止同事用 QQ 邮箱提交公司代码?
  10. java jpanel添加背景_java – 将背景图像添加到JPanel