bootstrap table合并单元格

合并单元格

JS代码部分

   var trueHeight = document.documentElement.clientHeight-document.body.offsetHeight;
    var templateTableParams = {
        classes: "table table-bordered table-hover",
        url: "${ctx}/purchasePlan/infoList.z",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        cache: false,     //是否使用缓存，默认为true
        striped: true,    //是否显示行间隔色
        singleSelect: true,   //单选
        clickToSelect: true,  //是否启用点击选中行
        showFooter:true,//合计
        height:trueHeight,
        queryParams:function () {
            var params = {
                djh: $("#djh").val(),
                jhlb: $("#jhlb").val(),
                lxdh:$("#lxdh").val(),
                orderNo:$("#orderNo").val(),
                itemCode: $("#itemCode").val(),
                itemName: $("#itemName").val(),
                startDate:$('#startDate').val(),
                endDate:$('#endDate').val()
            };
            return params;
        },
        columns: [
            {
                checkbox: true
            },
            {
                title: '序号',halign:"center", align:'center',
                formatter: function (value, row, index) {
                    return index + 1;
                }, width:'50px',
                footerFormatter: function (value) {
                    return '合计';
                }
            },

    {
        field: 'djh', title: '单据号',halign:"center", width:'80px'
    },

    {
        field: 'jhlb', title: '计划类别', align:'center',halign:"center", width:'80px'

    },
    {
        field: 'lrrname', title: '采购员',align:'center', halign:"center", width:'80px'
    },
    {
        field: 'rq', title: '计划日期', halign:"center", formatter :'paramsMatter', width:'140px'
    },
    {
        field: 'cgbm', title: '采购部门', halign:"center", width:'100px'
    },
    {
        field: 'jhyc', title: '计划月次', halign:"center", width:'70px'
    },
    {
        field: 'lxdh', title: '路线单号', halign:"center", formatter :'paramsMatter', width:'100px'
    },
    {
        field: 'gyfl', title: '物资类别', halign:"center", width:'100px'
    },
    {
        field: 'itemCode', title: '物资编码', halign:"center",formatter :'paramsMatter', width:'150px',sortable:true
    },
    {
        field: 'itemName', title: '物资名称', halign:"center", formatter :'paramsMatter', width:'100px',sortable:true
    },
    {
        field: 'cz', title: '物资属性', halign:"center", formatter :'paramsMatter', width:'100px'
    },
    {
        field: 'xqsl', title: '生产需求数量',halign:"center",align:'right',
        footerFormatter: function (value) {
            var count = 0;
            for (var i in value) { count += value[i].xqsl; }
            return count.toFixed(2); }, width:'100px'
    },
    {
        field: 'jhsl', title: '生产计划数量',halign:"center",align:'right',
        footerFormatter: function (value) {
            var count = 0; for (var i in value) { count += value[i].jhsl; }
            return count.toFixed(2);}, width:'100px'
    },
    {
        field: 'cgsl', title: '采购计划数量',halign:"center",align:'right',
        footerFormatter: function (value) {
            var count = 0; for (var i in value) { count += value[i].cgsl; }
            return count.toFixed(2); }, width:'100px'
    },
    {
        field: 'kcsl', title: '计划时库存', halign:"center",align:'right',
        footerFormatter: function (value) {
            var count = 0; for (var i in value) { count += value[i].kcsl; }
            return count.toFixed(2); }, width:'85px'
    },
    {
        field: 'cgjg', title: '采购结果', halign:"center", width:'70px'
    },
    {
        field: 'bz', title: '备注', halign:"center", formatter :'paramsMatter', width:'100px'
    },{
        field: 'orderNo', title: '销售合同编号', halign:"center", formatter :'paramsMatter', width:'100px'
    }
        ],
        cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
        trimOnSearch: true,
        onlyInfoPagination:false,//显示总记录数  必须打开pagination=true
        pagination: false,      //显示分页
        pageNumber: 1,             //初始化加载第一页，默认第一页
        pageSize:10,               //每页记录数
        pageList:[5,10,20],     //可供选择的每页的行数
        idField: 'id',
        uniqueId: 'id',
        smartDisplay:false,
        onPostBody:function (data) {

            //data： table的所有数据   job_user：所要合并的列   1：colspan为1    $('#puBmxqjh_table')    表格对象
            mergeCells(data,"djh",1,$('#puBmxqjh_table'));
}
    };
    //合并单元格
      mergeCells = function(data, fieldName, colspan, target) {
        var sort = Array();//记录每次需要合并的行数
        var num = 1;
        for (var i = 0; i < data.length - 1; i++) {
            for ( var prop in data[i]) {
                if (prop == fieldName) {//是否是需要合并的field
                    if (data[i][prop] == data[i + 1][prop]) {
                   //如果合并字段的值相等，与下一行合并
                      num++;
                        if (i == data.length - 2) {
                            sort.push(num);
                        }
                    } else {
                    //不需要与下一行合并
                        sort.push(num);
                        num = 1;
                    }
                    break;
                }
            }
        }
        var index = 0;
        for (var j = 0; j < sort.length; j++) {
            var count = sort[j];//需要合并的行数
            $(target).bootstrapTable('mergeCells', {
                index : index,
                field : fieldName,
                colspan : colspan,
                rowspan : count
            });
            index += count;//下次需要合并的index的值
        }
    };
    $('#puBmxqjh_table').bootstrapTable(templateTableParams);

页面效果展示