bootstrap table实现合并单元格效果(亲测有效)

最新推荐文章于 2024-01-20 16:06:00 发布

冰眸js

最新推荐文章于 2024-01-20 16:06:00 发布

阅读量1.1k

点赞数 3

文章标签：前端 javascript bootstrap

本文链接：https://blog.csdn.net/bingmoujs/article/details/130625593

版权

JavaScript代码

声明mergeCells函数，如：

/**
     * 合并单元格
     * @param data 原始数据（在服务端完成排序）
     * @param fieldName 合并属性名称
     * @param colspan  合并列
     * @param target  目标表格对象
     */
    function mergeCells(data,fieldName,colspan,target){
        //声明一个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;
                }
            }
        }
        for(var prop in sortMap){
            console.log(prop,sortMap[prop])
        }
        var index = 0;
        for(var prop in sortMap){
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
            index += count;
        }
    }

在bootstrapTable加载成功执行，如

 onLoadSuccess:function(data) {
                var data = $('#bootstrap-table').bootstrapTable('getData', true);
                //合并单元格
                mergeCells(data, "sdate", 1, $('#bootstrap-table'));

            },

效果图