【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
来源:互联网 发布:mac升级后能退回吗 编辑:程序博客网 时间:2024/06/05 14:07
用js控制bootstrapTable的高度有几种方法
方法二:
$(document).ready(回调函数)
如果有$(document).ready(回调函数),需要加上"resetView" 否则不起作用
如果我们根据table里面的内容来确定container的高度,当内容的高度大于窗口的高度就有滚动条,当内容的高度小于窗口的高度,container的高度设置为内容的高度
完整的js如下:
方法一:
<table class="table-striped qiliangqifei-tab" id="qiliangqifei"> <thead> <tr> <th data-valign="middle" >气费年月</th> <th>当期气量 </br > Sm<sup>3</sup></th> <th>当期气费 </br >(元)</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> <td>100</td> <td>100</td> </tr> <tr> <td>2016-10</td> <td>100</td> <td>100</td> </tr> </tbody></table> <script type="text/javascript"> $(document).ready( function (){ $( '#qiliangqifei' ).bootstrapTable( { height: 260 } );}); </script>
方法二:
<table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei"> <thead> <tr> <th data-valign="middle" >气费年月</th> <th>当期气量 </br > Sm<sup>3</sup></th> <th>当期气费 </br >(元)</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> <td>100</td> <td>100</td> </tr> <tr> <td>2016-10</td> <td>100</td> <td>100</td> </tr> </tbody></table><script type="text/javascript"> $('#qiliangqifei').bootstrapTable({height:$(window).height()-120}); </script>两者的区别是table元素中第二种方法是含有data-toggle="table" 及data-height="350",js调用时不要写
$(document).ready(回调函数)
方法三:
<table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei"> <thead> <tr> <th data-valign="middle" >气费年月</th> <th>当期气量 </br > Sm<sup>3</sup></th> <th>当期气费 </br >(元)</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> <td>100</td> <td>100</td> </tr> <tr> <td>2016-10</td> <td>100</td> <td>100</td> </tr> </tbody></table> <script type="text/javascript"> $(document).ready( function (){ $( '#qiliangqifei' ).bootstrapTable('resetView',{ height: 260 } );}); </script>
如果有$(document).ready(回调函数),需要加上"resetView" 否则不起作用
如果我们根据table里面的内容来确定container的高度,当内容的高度大于窗口的高度就有滚动条,当内容的高度小于窗口的高度,container的高度设置为内容的高度
完整的js如下:
$(document).ready( function (){ //设置bootstrapTable起始的高度 $('#tableTest1').bootstrapTable({height:$(window).height()-120});//当表格内容的高度小于外面容器的高度,容器的高度设置为内容的高度,相反时容器设置为窗口的高度-160 if($(".fixed-table-body table").height()<$(".fixed-table-container").height()){ $(".fixed-table-container").css({"padding-bottom":"0px",height:$(".fixed-table-body table").height()+20}); // 是当内容少时,使用搜索功能高度保持不变 $('#tableTest1').bootstrapTable('resetView',{height:"auto"});}else{ $(".fixed-table-container").css({height:$(window).height()-160}); } }); </script>
阅读全文
0 0
- 【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
- 关于table设置固定宽度高度自适应
- 水晶报表表格高度自适应设置方法
- TableCell自适应表格高度
- 前端开发中表格table单元格高度或者行高的设置
- tableviewcell自适应高度及stackview设置问题
- js css style动态设置table高度
- 使用storyboard设置label的自适应高度
- 使用Masonry设置自适应高度的UITableviewHeadView
- 自适应高度设置
- IFreame设置自适应高度
- 设置iframe高度自适应
- iframe 自适应高度js
- js iframe自适应高度
- JS iframe高度自适应
- iframe 自适应高度js
- js自适应高度
- iframe js自适应高度
- windows下Python中libffm简单使用
- PyCharm2017安装教程,包含注册码
- 二叉树
- EhCache在JAVA中的应用
- 快速上手Intellij idea
- 【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
- springboot创建一个可执行的jar
- NLP计算词相关关系之word2vec
- android 关于view的绘制
- 浅谈Git(一)
- Java基础第5讲--循环控制语句
- java基础笔记整理
- PHP程序如何debug?
- 张宴:Tokyo Cabinet数据库及其扩展应用