BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快)

当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦)

ps:这个是插件的官网,里面有英文api和例子:

还有,使用前请引入bootstrap的相关css,js,jQuery,以及bootstrap-table的css,js至少这5个基本文件

一,html表格方式

例一:需求,简单的表格数据呈现,表头是两行,还有一个上下浮的箭头

分析:很简单,只需要html就可以实现,按照常规的表格来画,添加上bootstrap-table独有的自定义属性即可,注意如果不使用js请在最开始的table标签中加上data-toggle

html代码:

<div> <table data-toggle="table" data-height="268"> <thead> <tr> <th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">来耗存</th> <th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">当日</th> <th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th> <th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th> </tr> <tr> <th data-field="drbq" data-align="center" data-valign="middle">本期</th> <th data-field="drtb" data-align="center" data-valign="middle">同比</th> <th data-field="drhb" data-align="center" data-valign="middle">环比</th> <th data-field="bzbq" data-align="center" data-valign="middle">本期</th> <th data-field="bztb" data-align="center" data-valign="middle">同比</th> <th data-field="bzhb" data-align="center" data-valign="middle">环比</th> <th data-field="bybq" data-align="center" data-valign="middle">本期</th> <th data-field="bytb" data-align="center" data-valign="middle">同比</th> <th data-field="byhb" data-align="center" data-valign="middle">环比</th> </tr> </thead> <tbody> <tr> <td>来煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>来煤量</td> <td>76573</td> <td><i></i>4.21</td> <td><i></i>1.45</td> <td>234534</td> <td><i></i>4.35</td> <td><i></i>2.75</td> <td>44225</td> <td><i></i>0.74</td> <td><i></i>3.45</td> </tr> <tr> <td>耗煤量</td> <td>43363</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>32422</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>13345</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>来煤量</td> <td>34624</td> <td><i></i>4.35</td> <td><i></i>1.23</td> <td>452346</td> <td><i></i>2.32</td> <td><i></i>0.05</td> <td>94524</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> <tr> <td>耗煤量</td> <td>21341</td> <td><i></i>0.31</td> <td><i></i>0.21</td> <td>334322</td> <td><i></i>1.13</td> <td><i></i>4.21</td> <td>3125113</td> <td><i></i>2.21</td> <td><i></i>2.94</td> </tr> </tbody> </table> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfxsd.html