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

Bootstrap
placeholder image
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 0_t_merge_arr.lengthi++) {
        
var item _t_merge_arr[i];
        
var rowsnum item.rowspan;
        
for var 0rowsnum-1j++) {
            
$(_t_rows[item.index+j+1]).css('display','none');
        }
        
$(_t_rows[item.index]).attr("rowSpan"item.rowspan);
    }
}

$("#data-table").bootstrapTable({
    
clickToSelecttrue,
    
singleSelecttrue,
    
columns: [
        {
title"序号align"center"sortablefalse ,
            
formatterfunction(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"sortablefalse ,
            
formatterfunction (value , row , rowIndex) {
                
return "<label style='display:none;'>" + row.country "</label>" + value;
            }
        },
        {
field"name" title"姓名align"center"sortabletrue},
        {
field"remark" title"说明sortabletrueclickToSelectfalse}
    ],
    
data: [
        {
"country" "中国"city" "襄阳"name" "庞统"remark" "中国的襄阳"},
        {
"country" "中国"city" "襄阳"name" "徐庶"remark" "中国的襄阳"},
        {
"country" "中国"city" "襄阳"name" "马谡"remark" "中国的襄阳"},
        {
"country" "韩国"city" "襄阳"name" "不知道"remark" "韩国的襄阳"}
    ],
    
onPostBodyfunction() {
        
window.rowProps undefined;
        _table_rowspan(
"#data-table" 1);
        _table_rowspan(
"#data-table" 2);
        
return true;
    },
    
responseHandlerfunction (result) {
        
var options $("#data-table").bootstrapTable("getOptions");
        
var pageNumber options.pageNumber;
        
var pageSize options.pageSize;
        
var rows = result.rows;
        
for(var i=rows.length i++){
            
var item rows[i];
            
item.id = (pageNumber 1) * pageSize + (1);
            
item.name item.name item.id;
        }
        
return result;
    }
});

效果预览

image.png

示例说明

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

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

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

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


相关下载

https://gitee.com/88911006/chendd-examples/tree/master/bootstrap


 点赞


 发表评论

当前回复:作者

 评论列表


留言区