bootstrap-table在bootstrap-table的表格中合并单元格:含有父类的合并单元格,父类不同时子类相同也不合并

在限定字段内合并单元格

今天遇到一个需求,简单来说就是合并单元格,但我实现时发现,要求其合并时,在国家相同的字段内才允许合并,遇见更复杂的需求,需要的父类可能为多个,所有我就在之前简单的合并单元格的方法基础上进行了部分修改。

/**
     * 在限定字段内合并单元格
     * @param data  原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param limitFieldNameList 限制在哪个属性名称内合并,为数组
     * @param colspan   合并列
     */
    function mergeCellsLimit(data, fieldName, limitFieldNameList, colspan) {
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for (var i = 0; i < data.length; i++) {
            for (var prop in data[i]) {
                if (prop == fieldName) { // 防止出现乱合并
                    // 部分字段要在某个字段内合并,不同limitFieldName字段的fieldName就算相同也不合并
                    var key = data[i][prop] === "" || data[i][prop] === 0 ? "无值" : data[i][prop];
                    for (var limitFieldNameListIndex = 0; limitFieldNameListIndex < limitFieldNameList.length; limitFieldNameListIndex++) {
                        key = key + data[i][limitFieldNameList[limitFieldNameListIndex]];
                    }
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }


                    break;
                }
            }
        }
        // for (var prop in sortMap) {
        //     console.log(prop, sortMap[prop])// 打印合并参数
        // }
        var index = 0;
        for (var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $('#bootstrap-table').bootstrapTable('mergeCells', {
                index: index,
                field: fieldName,
                colspan: colspan,
                rowspan: count
            });   // 进行合并单元格
            index += count;
        }
    }

然后在表格设置中调用,方法如下

onLoadSuccess: function (data) {
                var data = $('#bootstrap-table').bootstrapTable('getData', true);
                //合并单元格
                mergeCellsLimit(data, "field",["limitField"], 1, $('#bootstrap-table'));
            },

效果图
在这里插入图片描述