【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'));
            },

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

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值