news 2026/9/25 3:03:38

jQuery EasyUI 数据网格 - 合并单元格

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 合并单元格

下面直接给你最实用、最常见的合并单元格(merge cells)方法,jQuery EasyUI datagrid 官方没有内置合并,但通过onLoadSuccess事件超级容易实现,复制粘贴就能用,领导最爱的“同一客户订单合并显示 + 报表分组效果”全都有!

方法1:最简单最常用 - 按指定列合并单元格(推荐现在就用这个,3秒出效果)
比如按“客户名称”列合并相同行的单元格。

<tableid="dg"class="easyui-datagrid"title="合并单元格示例"style="width:800px;height:400px"data-options="url:'data.json', fitColumns:true, rownumbers:true, pagination:true, singleSelect:true, onLoadSuccess:mergeCellsByField"><thead><tr><thdata-options="field:'customer',width:120">客户名称</th><thdata-options="field:'product',width:150">商品名称</th><thdata-options="field:'price',width:100,align:'right'">单价</th><thdata-options="field:'quantity',width:80,align:'right'">数量</th><thdata-options="field:'amount',width:120,align:'right'">金额</th><thdata-options="field:'date',width:100">订单日期</th></tr></thead></table><script>// 通用的合并函数,支持同时合并多列functionmergeCellsByField(){varfields=['customer','date'];// 要合并的列字段名数组vardg=$('#dg');varrows=dg.datagrid('getRows');for(vari=0;i<fields.length;i++){varfield=fields[i];varcol=dg.datagrid('getColumnOption',field);col.editor=false;// 防止编辑时出错varmergeIndex=0;// 合并起始行varmergeCount=1;// 合并行数for(varj=1;j<=rows.length;j++){if(j<rows.length&&rows[j][field]==rows[j-1][field]){mergeCount++;}else{if(mergeCount>1){dg.datagrid('mergeCells',{index:mergeIndex,field:field,rowspan:mergeCount});}mergeIndex=j;mergeCount=1;}}}}</script>

效果:相同客户名称的行会自动合并客户列,相同日期的行合并日期列,报表感瞬间拉满!

方法2:高级版 - 支持跨列合并 + 合并后居中显示(更专业)

functionmergeCellsAdvanced(){vardg=$('#dg');varrows=dg.datagrid('getRows');// 合并客户列(垂直合并)mergeByField('customer');// 合并金额列为大标题(水平合并整行最后三列)dg.datagrid('mergeCells',{index:0,// 从第0行开始(可循环处理多组)field:'price',colspan:3// 合并 price + quantity + amount 三列});functionmergeByField(field){varmergeIndex=0;varmergeCount=1;for(vari=1;i<rows.length;i++){if(rows[i][field]==rows[i-1][field]){mergeCount++;}else{if(mergeCount>1){dg.datagrid('mergeCells',{index:mergeIndex,field:field,rowspan:mergeCount});// 可选:合并后文字垂直+水平居中setTimeout(function(){$('div.datagrid-cell[field="'+field+'"]').eq(mergeIndex).css({'text-align':'center','vertical-align':'middle'});},100);}mergeIndex=i;mergeCount=1;}}// 处理最后一段if(mergeCount>1){dg.datagrid('mergeCells',{index:mergeIndex,field:field,rowspan:mergeCount});}}}

然后在onLoadSuccess: mergeCellsAdvanced

方法3:分组加载 + 合并(适合大数据,分组标题行)
后台返回数据时加分组标识,前端插入标题行并合并:

onLoadSuccess:function(data){vardg=$(this);varrows=data.rows;varinsertIndex=0;for(vari=0;i<rows.length;){vargroupValue=rows[i].customer;vargroupRows=[];while(i<rows.length&&rows[i].customer==groupValue){groupRows.push(rows[i]);i++;}// 插入分组标题行dg.datagrid('insertRow',{index:insertIndex,row:{customer:'<b style="color:blue;">【'+groupValue+'】共'+groupRows.length+'笔订单</b>',product:'',price:'',quantity:'',amount:'',date:''}});// 合并标题行整行dg.datagrid('mergeCells',{index:insertIndex,field:'customer',colspan:6// 合并所有列});insertIndex+=groupRows.length+1;}}

你现在直接复制方法1到你的页面,刷新一下就能看到完美合并单元格效果了!
结合之前的复选框 + 分页 + 行内编辑 + 列运算 + 扩展编辑器,你的报表表格已经可以吊打99%的后台系统了。

想要我给你一个完整的HTML示例(带远程数据 + 多列合并 + 分组标题 + 底部合计)?
或者你告诉我你想怎么合并(比如“按省份合并 + 水平合并合计列”),我2分钟发你完整代码,复制就能跑!

快说说你现在的需求(比如“要合并多列”或“合并后加背景色”),我手把手帮你搞定,5分钟内看到超级专业的合并效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/25 1:08:27

用gtest快速验证算法原型的方法

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个算法原型验证项目&#xff0c;使用gtest快速测试算法实现。要求&#xff1a;1) 实现一个简单算法(如排序或搜索) 2) 编写对应的gtest测试用例 3) 包含性能测试 4) 支持参数…

作者头像 李华
网站建设 2026/9/24 22:48:48

PCB钻孔工艺的未来趋势如何?

【问】当前 PCB 钻孔工艺的发展瓶颈是什么&#xff1f;【答】随着 5G、人工智能、汽车电子等领域的发展&#xff0c;PCB 产品朝着高密度、高多层、高可靠性的方向升级&#xff0c;钻孔工艺面临三大瓶颈&#xff1a;第一&#xff0c;精度瓶颈&#xff1a;HDI 板和芯片载板需要加…

作者头像 李华
网站建设 2026/9/24 19:25:50

AI助力VMware17下载与配置:一键解决环境搭建难题

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个智能VMware17下载助手应用&#xff0c;功能包括&#xff1a;1.自动检测用户操作系统类型和硬件配置 2.根据分析结果推荐最适合的VMware17版本 3.提供官方安全下载链接 4.生…

作者头像 李华
网站建设 2026/9/24 15:07:30

1小时搭建虚拟线程原型:快马平台极速验证方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速开发一个虚拟线程原型系统&#xff0c;验证电商秒杀场景的可行性。功能要求&#xff1a;1. 模拟10000并发抢购 2. 使用虚拟线程处理请求 3. 实现简单的库存管理 4. 记录请求处理…

作者头像 李华
网站建设 2026/9/25 10:44:06

Seafile在教育行业的5个创新应用场景解析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个教育机构专用的Seafile扩展模块&#xff0c;包含&#xff1a;1.课程资料分类系统 2.作业提交与批改功能 3.学术论文协作空间 4.视频教学资源转码服务 5.学生账号批量导入工…

作者头像 李华
网站建设 2026/9/25 7:25:10

Unitask在远程团队协作中的实际应用案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个团队版Unitask协作平台&#xff0c;包含&#xff1a;1.团队任务看板 2.个人专注状态显示 3.智能任务分配 4.深度工作时段同步 5.团队效率分析报告。前端使用Vue3TypeScript…

作者头像 李华