“ 若依教程独家分享!点赞+关注,一起从「蒟蒻」变成「大佬」~”
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 });
}
});
复制代码
如果想围观票圈,可以扫这个二维码加我微信~
评论