BootStrap table表格插件自适应固定表头表格插件自适应固定表头(超好用超好用)
首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更
加直观，方便调整表格样式等，速度快）
当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数
据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦）
ps：这个是插件的官网，里面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
还有，使用前请引入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" class="table table-striped table-bordered table-hover" id="tableL01">
<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 class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>76573</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td>
<td>234534</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td>
<td>44225</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td>
</tr>
<tr>
<td>耗煤量</td>
<td>43363</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>32422</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>13345</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
weixin_38741531
- 粉丝: 6
- 资源: 946
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0