bootstrapTabale复杂表头+列合并

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012796085/article/details/85701022

//必须设置高度，否则无法固定表头
height:$(document).height()-170,
columns : [[
    	{title: '',
            field: '',
            align: 'center',
            formatter: function (value, row, index) {
                var pageSize = $(tableId).bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                var pageNumber = $(tableId).bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
            },rowspan: 2
        },
    	{field : 'bigarea',title : '大区',rowspan: 2,valign:'middle',halign:"center",align:'left'},
    	{field : 'ProvinceName',title : '省',rowspan: 2,valign:'middle',halign:"center",align:'left'},
    	{field : 'dbct_name',title : '分拨中心',rowspan: 2,valign:'middle',halign:"center",align:'left'},
        {field: 'dbct_cd',title:'分拨编码',rowspan:2,visible:false},
        {field: 'areaCode',title:'分拨大区',rowspan:2,visible:false},
    	{title : '分拨合计',colspan: 3,align:'center'}
    ],[
    	{field : 'scor_oper_cnt',title : '分拨操作件数',align:'right',halign:"center" },
    	{field : 'miss_cnt',title : '遗失预警件数',align:'right',halign:"center" ,formatter:function (value,row) {
    	        if(value==undefined){return "-"}
                var params ={start_time:$("#start_time").val(),end_time:$("#end_time").val(),TrsfId:row.dbct_cd,messType:'',areaCode:row.areaCode};
                params=JSON.stringify(params);
                return "<a href='#' onclick='prtmenuItem(\""+detailUrl+"\","+params+",\"遗失预警明细表\")'><span style='color:blue'>"+value+"</span></a>";
            } },
    	{field : 'miss_rt',title : '遗失预警率',align:'right',halign:"center"}
    ]],
    onLoadSuccess : function(data) {
        var data = $(tableId).bootstrapTable('getData',true);
        // 合并单元格
        mergeCells(data, "bigarea", 1, $(tableId));
        mergeCells(data, "ProvinceName", 1, $(tableId));
        //点击选中行，改变选中行的背景颜色
        $(tableId).on('click-row.bs.table', function (e, row, element){
            $('.success').removeClass('success');//去除之前选中的行的，选中样式
            $(element).addClass('success');//添加当前选中的 success样式用于区别
        });
        $(tableId).bootstrapTable('resetView');
    }

/**
 * 合并单元格
 * 
 * @param data
 *            原始数据（在服务端完成排序）
 * @param fieldName
 *            合并属性名称
 * @param target
 *            目标表格对象
 */
function mergeCells(data, fieldName, tableId) {
	// 声明一个map计算相同属性值在data对象出现的次数和
	var sortMap = {};
	for (var i = 0; i < data.length; i++) {
		for ( var prop in data[i]) {
			if (prop == fieldName) {
				var key = data[i][prop];
				if (sortMap.hasOwnProperty(key)) {
					sortMap[key] = sortMap[key] * 1 + 1;
				} else {
					sortMap[key] = 1;
				}
				break;
			}
		}
	}
	var index = 0;
	for ( var prop in sortMap) {
		var count = sortMap[prop] * 1;
		$(tableId).bootstrapTable('mergeCells', {
			index : index,
			field : fieldName,
			colspan : 1,
			rowspan : count
		});
		index += count;
	}
}

解决表头只显示第一行的Bug

<style type="text/css">
	.fixed-table-header{
		height:75px;
	}
</style>