当前位置：首页 > news >正文

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

news 2026/6/6 4:40:39

下面直接给你最实用、最常见的合并单元格（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;}}