基于Bootstrap table组件实现多层表头的实例代码

在做私活的时候，有一个需求是要在页面上实现多层表头。一开始有点懵，不知道怎么来实现，我回想起在JFTT的时候，曾用过Flex版的多层表头，不过那离现在已经很久远了，久远到Flex已经被淘汰出局了。于是在网上折腾了好一会儿，终于找到一款用起来简单，效果又很不错的组件――Bootstrap-table。

Bootstrap-table还有很多强大的功能，但这篇文章我们把关注点只放在多层表头上，关注点确定后，这篇博客就很简单了，但我觉得还是很有必要推而广之――因为之前在看董卿主持的《诗词大会》，里面有很多基础的知识，竟然有很多人都答不上来，搞得我一度很“嚣张”，对老婆夸下海口说我也能过第一轮，但事实是我过不了――我也不会写“碧玉妆成一树高，万条垂下绿丝绦（tao）”中的tao字。

所以，文章不在于其难度，而在于其意义――在月球上迈上一小步和在地球上迈上一小步差别就在于“这是个人迈出的一小步，但却是人类迈出的一大步。”

0.效果图

1.实现方法

 

  

   

    
妻子
    
车子
    
房子
    
总价值
   
   

    
唯一
    
Mini
    
Smart
    
90平
    
149平
    
别墅
   
  
  

   

    
∞
    
30万
    
20万
    
60万
    
100万
    
看着办
    
∞∞
   
  
 
 
 

2.具体步骤

第一步，通过CDN引入jquery和bootstrap-table。

第二步，第一层表头；

 妻子
 车子
 房子
 总价值

通过data-colspan指定二级表头横向有多少个，纵向为1；

通过data-rowspan指定二级表头纵向有多少个，横向为1；

第三步，第二层表头；

 唯一
 Mini
 Smart
 90平
 149平
 别墅

注意data-rowspan=”2”对应的第二层表头就不需要指定了。

第三步，启用bootstrap-table。

总结

以上所述是小编给大家介绍的Bootstrap table实现多层表头的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！