EasyUI DataGrid根据字段动态合并单元格
为什么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根据字段动态合并单元格相关推荐
- VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
- easyexcel 动态合并单元格
easyexcel 动态合并单元格 目前操作excel文档的底层都是用poi来进行的,在早期工作开发过程中,是基于poi,然后对每一个数据单元格进行操作代码编写,后面有一些比较好的开源项目,像easy ...
- 动态创建excel文件,动态合并单元格并提供下载
1.动态生成excel的原因 ** 出现的效果: ** 员工姓名没有自动合并单元格,在http://jxls.sourceforge.net/reference/xls_area.html 上面找了半 ...
- 使用EasyExcel 根据单元格数值动态合并单元格
文章目录 前言 一.实现思路 二.实现步骤 1.拦截策略 2.EasyExcel写操作 前言 使用EasyExcel 根据单元格数值动态合并单元格 开发中遇到一个需求,需要根据Excel表格中单元格的 ...
- elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...
- 动态合并单元格行和列方法封装 ~~~起手可用
在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用 /*** * @param {*} table vue对象, Element-ui Table 插件 ...
- JAVA导出excel 动态合并单元格
JAVA excel合并单元格原生poi 合并后的效果 直接上代码 (该方法为如果指定行的单元格里面的值一致则进行合并,直接粘贴使用即可) ** @param sheet* @param colIdx ...
- poi 导出Excel 动态 合并单元格
public String arrearagePeriodExport(ArrearageParam param) {param.setPageNo(1);param.setPageSize(Inte ...
- 根据表格中的数据,动态合并单元格
1.我们最终要实现这样一个效果 2.在表格上声明span-method方法,并注册相关的函数 <template><el-table:data="tableData&quo ...
最新文章
- 读书笔记白帽子讲web安全
- mysql 配置文件设置最大链接数 max_connections不生效
- [云炬创业基础笔记] 第四章测试12
- Makefile中支持的函数大全
- python 列表推导式
- Big Sur恢复Catalina ? macOS Big Sur降级的三种方法 !
- 移动信号突然变成无服务器,为什么移动4G信号突然变成H、E、G就无法上网, 背后的真实原因?...
- ios学习8_KVC和字典转模型
- html5与css3基础教程课件,揭秘HTML5和CSS3教学幻灯片.ppt
- 《iOS 6核心开发手册(第4版)》——1.13节秘诀:从滚动视图中拖动
- android消息发送字符串,Android aSmack-如何对文件发送进行自定义消息...
- HTML5与传统HTML的区别
- java银行排队系统_java--面向对象(一个简单的银行排队系统)原理版
- python实现百度语音合成(超详细!!)
- 怎么从网上办大流量卡呢?具体步骤小编都给你写好的!
- linux断电并重启命令,Linux基本操作:关机 重启
- 企业建网站应该这样选网站空间
- 快读函数read()
- 爬虫获取网易云音乐单曲或歌单实现音乐闹钟
- API网关—Ocelot之服务发现
热门文章
- kubeasz_使用kubeasz安装K8S集群,不受国内网络环境影响
- android java 多线程,Android多线程的四种方式
- python pandas DataFrame 修改数据
- Centos7 上配置 java JDK1.8
- java排序为什么会出现多次排序结果不一样_并发理论基础:指令重排序问题
- flask服务器端解析文件包时出现问题,flask + celery 遇到的那些坑
- Elasticsearch之Search API
- 用python写脚本筛选原创微博_基于python编写的微博应用
- 大佬教你怎样防止同事用 QQ 邮箱提交公司代码?
- java jpanel添加背景_java – 将背景图像添加到JPanel