前段時間工作中碰到有需求，要求數據按下圖所示格式來顯示，當時在園子里看到了一篇文章（時間久了，想不起是哪一篇），研究了后做出了如下的DEMO，在此當作學習筆記，簡單記錄一下。
首先是效果圖，如下:
數據庫臨時建的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;" onclick="QueryData();">查詢</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width: 60px;" onclick="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 () {
//加載數據
$("#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: '數量', 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) {//循環所有行記錄
var sum = 0;
//計算小計的sum
if (item.price != "" && item.num != "") {
sum = item.price * item.num;
} else {
sum = item.price;
}
if (!currArea) {//判斷是還是是當前區域id，如果不是賦值當前記錄的sex給變量
currArea = item.sex;
}
if (currArea == item.sex) {//如果是當前的區域id，計數小計
total += sum;
} else {//不是當前的，添加datagrid的一條行數據
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) {//循環所有待添加的插入行記錄，對應插入位置是原始行數據對應記錄的最后一行
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>