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

1高度设置及自适应，你get了多少？

本期内容

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

2 三种方法？！

方法1：

    

        

            
气费年月
            
当期气量 
 Sm3
            
当期气费 
（元）
        
    
    

        

            
2016-12
            
100
            
100
        
        

            
2016-10
            
100
            
100
        
    

方法2：

    

        

            
气费年月
            
当期气量 
 Sm3
            
当期气费 
（元）
        
    
    

        

            
2016-12
            
100
            
100
        
        

            
2016-10
            
100
            
100
        
    

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

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

方法3：

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

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

    

        

            
气费年月
            
当期气量 
 Sm3
            
当期气费 
（元）
        
    
    

        

            
2016-12
            
100
            
100
        
        

            
2016-10
            
100
            
100
        
    

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 });
    }

});

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