BootstrapTable 相同内容单元格合并

最新推荐文章于 2025-06-07 08:28:40 发布

原创

最新推荐文章于 2025-06-07 08:28:40 发布 · 1.2w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#BootstrapTable #单元格合并

本文介绍如何在BootstrapTable中实现相同内容单元格的合并，思路来源于某大神的js改造，提供了多行表头的实现方法，并在onClickRow事件中配置单元格合并。详细步骤和效果图见文章内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个功能的思路来自于这里

http://blog.youkuaiyun.com/jingtianyiyi/article/details/76208880

把这位大神的js改的更加适用了一些

效果图如下

BootstrapTable 怎么使用我就不过多描述了，大家可以自行查询相关资料。

多行表头的实现：在onClickRow里配置类似如下

onClickRow: function(row, $el){
               },
               columns: [[{
            	colspan: 1,
  		        rowspan: 2,
		        checkbox: true
		       
              }
               ,{
		        field: 'physicalTestId.year',
		        title: '年份',
		        colspan: 1,
  		        rowspan: 2,
		        sortable: true		       
		    }
			,{
		        field: 'physicalTestId.name',
		        title: '体能测试',
		        colspan: 1,
  		        rowspan: 2,
		        sortable: true    
		    }