登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:3个月前 

Bootstrap-table进阶篇(单元格合并)

2020-04-10 00:32:58 阅读:()

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

多年前随便一搜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;
    }
});

 效果预览

图片.png

示例说明

(1)解决了多列并列合并问题;

(2)解决了单元格合并效果处的数据编号;

(3)示例终归为示例,实际使用的时候需要考虑除了本例中的排序后的单元格合并扔需要支持分页等事件后的数据合并;

(4)示例中的合并单元格效果是修改过可支持bootstrap冻结列效果的单元格合并;




你可能感兴趣的:
      关键字:merge(23)var(18)单元格(15)table(13)arr(12)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0