1. 程式人生 > >datagrid合併單元格

datagrid合併單元格

image

表頭合併

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;
        }
    }
}