码迷,mamicode.com
首页 > 其他好文 > 详细

bootstraptable行合并

时间:2019-08-02 14:50:13      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:style   相同属性   cell   else   相同   load   rowspan   dex   表格   

onLoadSuccess: function (data) {
            data = $(‘#categorySonTab‘).bootstrapTable(‘getData‘, true);
            //合并单元格
            mergeCells(data, "name", 1, $(‘#categorySonTab‘));
            mergeCells(data, "url", 1, $(‘#categorySonTab‘));
            mergeCells(data, "cateWord", 1, $(‘#categorySonTab‘));
            mergeCells(data, "id", 1, $(‘#categorySonTab‘));

        },

 

合并方法(直接可用)

/**
 * 合并单元格
 * @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;
            }
        }
    }
    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行合并

标签:style   相同属性   cell   else   相同   load   rowspan   dex   表格   

原文地址:https://www.cnblogs.com/abo666/p/11288303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!