前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

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

作者头像
tianyawhl
发布2019-04-04 15:49:58
20.7K0
发布2019-04-04 15:49:58
举报
文章被收录于专栏:前端之攻略前端之攻略

用js控制bootstrapTable的高度有几种方法

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>

两者的区别是table元素中第二种方法是含有data-toggle="table" 及data-height="350",js调用时不要写

$(document).ready(回调函数)

3、

<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>

我的个人网站-前端之攻略

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017/03/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档