datagrid合併單元格
阿新 • • 發佈:2019-01-11
表頭合併
columns:[
[
{field:'bigarea',title:'大區',rowspan:2,width:$$.fillsize(0.1),align:'center'},
{field:'ProvinceName',title:'省份',rowspan:2,width:$$.fillsize(0.1),align:'center'},
{field:'dbct_name',title:'分撥中心',rowspan:2,width:$$.fillsize(0.1),align:'center' },
{field:'dbct_id',title:'分撥中心編碼',rowspan:2,hidden:true},
{field:'stats_dt',title:'統計時間',rowspan:2,hidden:true},
{title:'攬件',colspan:5,align:'center'}
],[
{field:'pick_ship_cnt',title:'票數',width:$$.fillsize(0.1),align:'center'},
{field:'pick_cnt' ,title:'件數',width:$$.fillsize(0.1),align:'center'},
{field:'pick_setl_wgt',title:'結算重量/噸',width:$$.fillsize(0.1),align:'center'},
{field:'pick_actl_wgt',title:'實際重量/噸',width:$$.fillsize(0.1),align:'center'},
{field:'pick_vol',title:'體積/方',width:$$.fillsize(0.1 ),align:'center'}
]
],
內容合併
// 後端先獲取查詢資料List<Map>,再追加首行add(0,合計map);追加末行add(合計map);
// select '合計' as bigarea,sum(**) as pick_ship_cnt,......
onLoadSuccess: function (data) {
//首尾行合計合併單元格,如果要操作的單元格比較多可以使用each迴圈,我這裡只新增首位行合計,所以直接寫的
$("#shipmontTable").datagrid('mergeCells',{
index: 0, //行索引
field:'bigarea', //欄位名
rowspan: null, //跨行
colspan: 2 //跨列
});
var datarows = data.rows.length;
$("#shipmontTable").datagrid('mergeCells',{
index: datarows-1,
field:'bigarea',
rowspan: null,
colspan: 2
});
//垂直合併單元格
mergeCells(listId,"bigarea,ProvinceName,dbct_name");
}
垂直合併公用方法
function mergeCells(tableID, colList) {
var colArray = colList.split(",");
var tTable = $("#" + tableID);
var tableRows = tTable.datagrid("getRows");
var tableRowCnts = tableRows.length;
var rowspan;
var preTxt = "";
var curTxt = "";
for (j = colArray.length - 1; j >= 0; j--) {
preTxt = "";
rowspan = 1;
for (i = 0; i <= tableRowCnts; i++) {
if (i == tableRowCnts) {
curTxt = "";
} else {
curTxt = tableRows[i][colArray[j]];
}
if (preTxt == curTxt) {
rowspan += 1;
} else {
tTable.datagrid("mergeCells", {
index: i - rowspan,
field: colArray[j],//合併欄位
rowspan: rowspan,
colspan: null
});
rowspan = 1;
}
preTxt = curTxt;
}
}
}