Bootstrap-table进阶篇（单元格合并）

Bootstrap

admin 发布于：2020-04-10 00:32:58

阅读：loading

基本介绍

这里说的单元格合并不是标题行的单元格合并，也不是表格数据的横向合并，就是使用最普遍的单元格纵向合并效果，首选来说官网提供的有单元格合并示例（之前看过一眼），似乎使用起来需要自己做一些计算逻辑，太麻烦，所以考虑自己的实现。

多年前随便一搜jQuery的table单元格合并插件，有许多许多，后来找到一款使用至今的插件，代码写的一般，可以满足基于table布局的横向与纵向合并效果，经过改造（适配）可用于各个js框架的单元格合并效果，比如说曾经就支持了jquery widgets的datagrid插件的单元格合并效果。

至于多列的并列合并问题，其实在前台上很好解决，无需限制N-1的最大合并范围小于N，直接将唯一约束条件隐藏在td的某个元素中，再根据td的html()去做对比就可以了。

参考代码

<table id="data-table"></table>
<script type="text/javascript">
//函数说明：合并指定表格（表格id为_t_id）指定列（列数为_t_colnum）的相同文本的相邻单元格
//参数说明：_t_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
//参数说明：_t_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
function _table_rowspan(_t_id, _t_colnum) {
    //声明合并数组
    var _t_merge_arr = [];
    //声明起始行、合并行数
    var _t_start_index = 0;
    var _t_merge_number = 0;
    //声明临时比较变量
    var _t_compare_value = '';
    //获取数据行数
    var _t_rows = null;
    if($(_t_id).length == 1){
        _t_rows = $(_t_id + " tr td:nth-child(" + _t_colnum + ")");
    } else if($(_t_id).length > 1){
        _t_rows = $(_t_id).eq($(_t_id).length - 1).find("tr td:nth-child(" + _t_colnum + ")");
    } else {
        return;
    }
    _t_rows.each(function(i) {
        var _t_temp_value = $(this).text();
        if (i==0) {
            //首行不比较
            _t_compare_value = _t_temp_value;
            _t_merge_number ++;
        } else {
            //对比本行数据和上行数据是否一样
            if (_t_compare_value == _t_temp_value) {
                _t_merge_number ++;
                if(_t_merge_number > 1){
                    //声明合并行大于1的对象
                    var _t_merge_object = {index: _t_start_index,rowspan: _t_merge_number};
                    //取出合并数组最后一个对象
                    var _t_merge_arr_last_object = _t_merge_arr[_t_merge_arr.length - 1];
                    if (_t_merge_arr.length > 0) {
                        //根据起始下标看是否是同一合并
                        if (_t_merge_arr_last_object.index == _t_merge_object.index) {
                            _t_merge_arr[_t_merge_arr.length - 1] = _t_merge_object;
                        } else {
                            _t_merge_arr.push(_t_merge_object);
                        }
                    } else {
                        _t_merge_arr.push(_t_merge_object);
                    }
                }
            } else {
                _t_merge_number = 1;
                _t_start_index = i;
                _t_compare_value = _t_temp_value;
            }
        }
    });
    for (var i = 0; i < _t_merge_arr.length; i++) {
        var item = _t_merge_arr[i];
        var rowsnum = item.rowspan;
        for ( var j = 0; j < rowsnum-1; j++) {
            $(_t_rows[item.index+j+1]).css('display','none');
        }
        $(_t_rows[item.index]).attr("rowSpan", item.rowspan);
    }
}

$("#data-table").bootstrapTable({
    clickToSelect: true,
    singleSelect: true,
    columns: [
        {title: "序号" , align: "center", sortable: false ,
            formatter: function(value , row , rowIndex){
                window.rowProps = (window.rowProps || {});
                window.rowProps[row.country + "_" + row.city] = true;
                return Object.getOwnPropertyNames(window.rowProps).length;
            }
        },
        {field: "city" , title: "城市" , align: "center", sortable: false ,
            formatter: function (value , row , rowIndex) {
                return "<label style='display:none;'>" + row.country + "</label>" + value;
            }
        },
        {field: "name" , title: "姓名" , align: "center", sortable: true},
        {field: "remark" , title: "说明" , sortable: true, clickToSelect: false}
    ],
    data: [
        {"country" : "中国" , "city" : "襄阳" , "name" : "庞统" , "remark" : "中国的襄阳"},
        {"country" : "中国" , "city" : "襄阳" , "name" : "徐庶" , "remark" : "中国的襄阳"},
        {"country" : "中国" , "city" : "襄阳" , "name" : "马谡" , "remark" : "中国的襄阳"},
        {"country" : "韩国" , "city" : "襄阳" , "name" : "不知道" , "remark" : "韩国的襄阳"}
    ],
    onPostBody: function() {
        window.rowProps = undefined;
        _table_rowspan("#data-table" , 1);
        _table_rowspan("#data-table" , 2);
        return true;
   },
    responseHandler: function (result) {
        var options = $("#data-table").bootstrapTable("getOptions");
        var pageNumber = options.pageNumber;
        var pageSize = options.pageSize;
        var rows = result.rows;
        for(var i=0 ; i < rows.length ; i++){
            var item = rows[i];
            item.id = (pageNumber - 1) * pageSize + (i + 1);
            item.name = item.name + item.id;
        }
        return result;
    }
});