前段時間工作中碰到有需求，要求數(shù)據(jù)按下圖所示格式來顯示，當時在園子里看到了一篇文章（時間久了，想不起是哪一篇），研究了后做出了如下的DEMO，在此當作學習筆記，簡單記錄一下。

　　首先是效果圖，如下:

　　數(shù)據(jù)庫臨時建的DEMO表，如下：??

?

　　前臺代碼，如下：

<form id="form1"><div data-options="region:'north',title:'查詢條件',collapsible:false,height:'auto'"><div class="cx-box"><ul class="cx-ul"><li><span>登錄名稱</span><input id="txtName" type="text" /></li><li><span>操作員名</span><input id="txtDeptName" type="text" /></li><li><span>角色</span><input id="txtRole" class="easyui-combobox" style="height:22px;width:132px" /></li><li><span>學生</span><input id="txtStudent" style="height:22px;width:132px" /></li></ul><div class="cx-button"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width: 60px;" οnclick="QueryData();">查詢</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width: 60px;" οnclick="AddData();">添加</a></div><div class="clear"></div></div></div><div data-options="region:'center'"><div class="easyui-layout" data-options="fit:true,border:false"><div data-options="region:'center',title:'用戶列表',border:false" id="datadiv"><table id="datagrid"></table></div></div></div><input type="hidden" id="hidOperatorId" /><input type="hidden" id="hidDeptCode" />
</form>
<script>$.extend($.fn.datagrid.methods, {autoMergeCells: function (jq, fields) {return jq.each(function () {var target = $(this);if (!fields) {fields = target.datagrid("getColumnFields");}var rows = target.datagrid("getRows");var i = 0,j = 0,temp = {};for (i; i < rows.length; i++) {var row = rows[i];j = 0;for (j; j < fields.length; j++) {var field = fields[j];var tf = temp[field];if (!tf) {tf = temp[field] = {};tf[row[field]] = [i];} else {var tfv = tf[row[field]];if (tfv) {tfv.push(i);} else {tfv = tf[row[field]] = [i];}}}}$.each(temp, function (field, colunm) {$.each(colunm, function () {var group = this;if (group.length > 1) {var before,after,megerIndex = group[0];for (var i = 0; i < group.length; i++) {before = group[i];after = group[i + 1];if (after && (after - before) == 1) {continue;}var rowspan = before - megerIndex + 1;if (rowspan > 1) {target.datagrid('mergeCells', {index: megerIndex,field: field,rowspan: rowspan});}if (after && (after - before) != 1) {megerIndex = after;}}}});});});}});var sortFlag = false;       $(function () {//加載數(shù)據(jù) $("#datagrid").datagrid({url: 'GetDtUser1',border: false,singleSelect: true,rownumbers: true,toolbar: "#toolbar",columns: [[{ field: 'id',hidden:true, title: '序號', width: 100 },{ field: 'sex', title: '性別', width: 100 },{field: 'divr_user', title: '姓名', width: 100},{field: 'price', title: '單價', width: 100},{field: 'num', title: '數(shù)量', width: 100},{field: 'sum', title: '金額', width: 100,formatter: function (value, row, index) {if (!value && (row.price != "" && row.num != "")) {return row.price * row.num;}else if(!value && row.price != ""){return row.price;}else {return value;}}}]],onLoadSuccess: function (data) {if (data.total > 0) {if (!sortFlag) $(this).datagrid("autoMergeCells", ['sex']);var rows = $('#datagrid').datagrid('getRows');var currArea = '';var total = 0;//小計var sumTotal = 0;//合計var len = rows.length - 1;var objectArray = [];$.each(rows, function (i, item) {//循環(huán)所有行記錄var sum = 0;//計算小計的sumif (item.price != "" && item.num != "") {sum = item.price * item.num;} else {sum = item.price;}if (!currArea) {//判斷是還是是當前區(qū)域id，如果不是賦值當前記錄的sex給變量currArea = item.sex;}if (currArea == item.sex) {//如果是當前的區(qū)域id，計數(shù)小計total += sum;} else {//不是當前的，添加datagrid的一條行數(shù)據(jù)sumTotal += total;objectArray.push({index: i,row: {sex: '<span class="subtotal">小計</span>',sum: '<span class="subtotal">' + total.toFixed(2) + '</span>'}});currArea = item.sex;total = sum;}if (i == len) {//最后一行sumTotal += total;objectArray.push({index: i,row: {sex: '<span class="subtotal">小計</span>',sum: '<span class="subtotal">' + total.toFixed(2) + '</span>'}});}});var num = 0;$.each(objectArray, function (i, item) {//循環(huán)所有待添加的插入行記錄，對應插入位置是原始行數(shù)據(jù)對應記錄的最后一行if (i < objectArray.length - 1) {//判斷是否是最后一行item.index = item.index + num;$('#datagrid').datagrid('insertRow', {index: item.index,	// 索引從0開始row: item.row});$('#datagrid').datagrid('mergeCells', {index: item.index,field: 'sex',colspan: '4'})num++;} else {$('#datagrid').datagrid('appendRow',item.row);$('#datagrid').datagrid('appendRow',{sex: '<span class="subtotal">合計</span>',sum: '<span class="subtotal">' + sumTotal.toFixed(2) + '</span>'});$('#datagrid').datagrid('mergeCells', {index: $('#datagrid').datagrid('getRows').length - 2,field: 'sex',colspan: '4'})$('#datagrid').datagrid('mergeCells', {index: $('#datagrid').datagrid('getRows').length - 1,field: 'sex',colspan: '4'})}});}}});});</script>

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/skye-mei/p/7998303.html

總結(jié)

以上是生活随笔為你收集整理的easyui 报表合并单元格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。