写点什么

RUOYI 框架教程 7 |若依 js 设置高度及自适应居然这么简单,你敢信么!

发布于: 2021 年 03 月 24 日


 若依教程独家分享!点赞+关注,一起从「蒟蒻」变成「大佬」~


1 高度设置及自适应,你 get 了多少?

本期内容

bootstrap 表格插件 bootstrap-table 的 js 设置高度及高度自适应


2 三种方法?!

方法 1:


<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>
复制代码


方法 2:



<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>
复制代码


方法 1 和方法 2 的区别是:

table 元素中第二种方法是含有 data-toggle="table" 及 data-height="350",js 调用时不要写 $(document).ready(回调函数)


方法 3:


如果有 $(document).ready(回调函数),需要加上"resetView" 否则不起作用;

如果我们根据 table 里面的内容来确定 container 的高度,当内容的高度大于窗口的高度就有滚动条,当内容的高度小于窗口的高度,container 的高度设置为内容的高度


<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>
复制代码

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 }); }
});
复制代码


如果想围观票圈,可以扫这个二维码加我微信~




发布于: 2021 年 03 月 24 日阅读数: 10
用户头像

爱写作的95后国企产品|程序媛 2020.05.06 加入

爱写作的95后国企产品|程序媛,公众号【若依框架教程】、【V5codings】

评论

发布
暂无评论
RUOYI 框架教程 7 |若依js设置高度及自适应居然这么简单,你敢信么!