官方文檔 - EasyUI 合并單元格

為了合并數據網格（datagrid）單元格，只需簡單地調用 ‘mergeCells’ 方法，并傳入合并信息參數，告訴數據網格（datagrid）如何合并單元格。在所有合并的單元格中，除了第一個單元格，其它單元格在合并后被隱藏。

示例代碼：

$('#tt').datagrid({onLoadSuccess:function(){var merges = [{index:2,rowspan:2},{index:5,rowspan:2},{index:7,rowspan:2}];for(var i=0; i<merges.length; i++)$('#tt').datagrid('mergeCells',{index:merges[i].index,field:'productid',rowspan:merges[i].rowspan});}});

使用實例（ajax后臺排序后，傳給前端，合并單元格，按照相同的某列屬性值合并）：

當數據加載之后，我們合并數據網格（datagrid）中的一些單元格，所以放置下面的代碼在 onLoadSuccess 回調函數中。

$.ajax({url: url,type: "post",processData: false,contentType: false,success: function (spot_table_data) {spot_table_json = JSON.parse(spot_table_data);console.log(spot_table_json);console.log('spot_table_json length = ' + spot_table_json.length);$('#dg').datagrid({frozenColumns: [[{field: 'chn_name', title: '品種', align: 'center'}]],filterBtnIconCls: 'icon-filter',data: json_to_array(spot_table_json),striped: true, //隔行變色onLoadSuccess: function () {// 合并單元格var rows = $('#dg').datagrid("getRows");//獲取行的數據for (var i = 0; i < rows.length; i++) {var rowspan = 0;for (var j = i; j < rows.length; j++) {{#console.log(rows[i]);#}if (rows[i].p_code == rows[j].p_code) {//計算合并多少行rowspan++;}}if (rowspan > 1) {//mergeCells合并單元格，index第幾行開始，field合并的字段，rowspan合并行數，colspan合并列$('#dg').datagrid('mergeCells', {index: i,field: 'chn_name',rowspan: rowspan});i = i + rowspan - 1;console.log('rowspan=' + rowspan);}}}});},error: function (e) {alert("ajax排序失敗");}})

合并效果示例（官方示例圖）

總結

以上是生活随笔為你收集整理的【EasyUI】DataGrid 合并单元格 - 使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。