bootstrap table合并单元格mergeCell

//对应第一个合并的单元格

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) {
                    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;
        }
    };

$('#table').bootstrapTable({

   url : '----/-----/----',
   method : 'post',
   ...
   pageNumber : 1,
   pageSize : 10,
   pageList : [ 10, 20, 50 ],

   columns:[{....},{
                           title : '作业者',
                           field : 'job_user',
                           valign : "middle",
                           align : "center",
                           width: '200px',
                           rowspan:2
     },{........}],

   onAll : function() {
         var data = $('#table').bootstrapTable('getData', true);

          //data: table的所有数据   job_user:所要合并的列   1:colspan为1    $('#table')    表格对象
          mergeCells(data,"job_user", 1, $('#table'));

          //全部列合并的单元格  ---最后两列
          $('#table').bootstrapTable('mergeCells', {
               index : 0,
               field : "average_all",                 //所合并的字段项
               rowspan : data.length              //数据得长度
           });
           $('#table').bootstrapTable('mergeCells', {
                index : 0,
                field : "pairs_all",
                rowspan : data.length
           });

    }  

)};

这就是合并之后的效果。

扫描二维码关注公众号,回复: 12647615 查看本文章

--------------------------------------------------------------------------------------------------------------------------------------------------

扩展:

知道mergeCells的方法实现之后,可以活用,比如:下面这个方法

    mergeOtherCells = function(data, fieldName,otherName, 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) {
                    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 : otherName,
                colspan : colspan,
                rowspan : count,
            });
            index += count;
        }
    };

此例子为:姓名、组别、个人综合成绩、中心综合成绩合并的单元格     都是根据编号合并的单元格  来对他们进行的合并的

// mergeOtherCells参数中多了一个otherName 的参数,就是,你想要用fieldName的合并量  来合并的其他字段otherName

mergeCells(data,"analyst_num", 1, $('#monScoreSta'));
mergeOtherCells(data,"analyst_num","analyst_name", 1, $('#monScoreSta'));
.......

猜你喜欢

转载自blog.csdn.net/jaja_zz/article/details/84636039