没有合适的资源?快使用搜索试试~ 我知道了~
首页BootStrap table表格插件自适应固定表头(超好用)
资源详情
资源评论
资源推荐
BootStrap table表格插件自适应固定表头表格插件自适应固定表头(超好用超好用)
主要介绍了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>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>34624</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td>
<td>452346</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td>
<td>94524</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>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>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>
weixin_38694541
- 粉丝: 12
- 资源: 927
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2023年中国辣条食品行业创新及消费需求洞察报告.pptx
- 2023年半导体行业20强品牌.pptx
- 2023年全球电力行业评论.pptx
- 2023年全球网络安全现状-劳动力资源和网络运营的全球发展新态势.pptx
- 毕业设计-基于单片机的液体密度检测系统设计.doc
- 家用清扫机器人设计.doc
- 基于VB+数据库SQL的教师信息管理系统设计与实现 计算机专业设计范文模板参考资料.pdf
- 官塘驿林场林防火(资源监管)“空天地人”四位一体监测系统方案.doc
- 基于专利语义表征的技术预见方法及其应用.docx
- 浅谈电子商务的现状及发展趋势学习总结.doc
- 基于单片机的智能仓库温湿度控制系统 (2).pdf
- 基于SSM框架知识产权管理系统 (2).pdf
- 9年终工作总结新年计划PPT模板.pptx
- Hytera海能达CH04L01 说明书.pdf
- 数据中心运维操作标准及流程.pdf
- 报告模板 -成本分析与报告培训之三.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1