效果图：
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../extends.js"></script> </head> <body> <h2>Merge Cells for DataGrid</h2> <p>Cells in DataGrid body can be merged.</p> <div style="margin:20px 0;"></div> <table class="easyui-datagrid" id="dg" title="Merge Cells for DataGrid" style="700px;height:250px" data-options=" rownumbers: true, singleSelect: true, iconCls: 'icon-save', data:qyData, method: 'get', onLoadSuccess: onLoadSuccess "> <thead> <tr> <th data-options="field:'productid',100">Product</th> <th data-options="field:'productname',80">ProductName</th> <th data-options="field:'itemid',80">Item ID</th> <th data-options="field:'listprice',80,align:'right'">List Price</th> <th data-options="field:'unitcost',80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',240">Attribute</th> <th data-options="field:'status',60,align:'center'">Status</th> </tr> </thead> </table> <input type="button" value="合并" id="mergeCells" onclick="hb()"> <script type="text/javascript"> var qyData = {"total":11,"rows":[ {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"productid":"d1","productname":"p2","unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}, {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"}, {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"}, {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}, {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"}, {"productid":"d5","productname":"p5"}, {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"}, {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} ]} var jcData = [ {"unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, {"unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, {"unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"} ] function onLoadSuccess(data){ $(this).datagrid("autoMergeCellAndCells",['productid','productname']); } function hb(){ var id = "d5"; var data = $("#dg").datagrid('getData'); var rows = data.rows; var total = data.total; var qFileds = ['productid','productname']; var qrow = {}; var n = null; var d = 0; for(var i = 0;i<rows.length;i++){ if(rows[i][qFileds[0]] == id){ if(n == null) n = i; d++; } } for(var i = 0;i<qFileds.length;i++){ qrow[qFileds[i]] = rows[n][qFileds[i]]; } var r = null; for(var i = 0;i<jcData.length;i++){ //Array.prototype.push.apply(jcData[i], qrow); //数组追加 jcData[i] = $.extend({}, jcData[i],qrow);//json对象追加 if(i == 0){ r = rows.splice(n,d,jcData[i]);//从n个位置，开始删除d个，并追加jcData }else{ r = rows.splice(n,0,jcData[i]); } } total = total - d + jcData.length; $("#dg").datagrid('loadData',{total:total,rows:rows}) } </script> </body> </html>