首页 新闻 搜索 专区 学院

bootstrap-table固定表头

0
悬赏园豆:10 [已解决问题] 解决于 2018-04-10 11:43

bootstrap-table固定表头,参数怎么设置,或者应该怎么编写代码固定它

yjcd的主页 yjcd | 初学一级 | 园豆:119
提问于:2018-03-22 17:31
< >
分享
最佳答案
0
收获园豆:10
ycyzharry | 高人七级 |园豆:22493 | 2018-03-23 09:24
其他回答(1)
0

Bootstrap-Table插件可以实现

BUTTERAPPLE | 园豆:2950 (老鸟四级) | 2018-03-22 17:37

我就是用的bootstrap-table的插件,没有找到相应的参数设置,请问具体应该怎么做

 

支持(0) 反对(0) yjcd | 园豆:119 (初学一级) | 2018-03-23 11:29

@yjcd: 参考一下这个 https://segmentfault.com/a/1190000004713875?_ea=701754


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="renderer" content="webkit" />
    <title>头部固定的表格</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
    <style>
        body {
            padding-top: 100px;
        }
        #goodsList {
            padding: 0;
            height: 400px;
            overflow-y: scroll;
        }
        .fixTable thead {
            background-color: #fff; 
        }
    </style>
</head>
<body>


<div id="goodsList" class="col-xs-offset-3 col-xs-6">
    <table id="textTable" class="table table-bordered scrollTable">
        <thead>
        <tr>
            <th width="35%">姓名</th>
            <th width="25%">年龄</th>
            <th width="20%">性别</th>
            <th width="10%">身高</th>
            <th width="10%">体重</th>
        </tr>
        </thead>
        <tbody id="testTbody"></tbody>
    </table>
</div>

<script type="text/javascript">
    
    $(document).ready(function () {

        var html = '',
            $ele = $('#testTbody');
        for(var i = 0; i < 20; i++) {
            html += "<tr><td>123456</td><td>12345</td><td>1234</td><td>123</td><td>12</td></tr>";
        }
        $ele.empty().append(html);

        var $fixTable = $('#goodsList .fixTable');
        $('#goodsList').scroll(function() {
            var id = '#' + this.id;
            var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
                style = {
                    'position': 'absolute',
                    'left': '0',
                    'right': '0',
                    'top': scrollTop + 'px'
                };
            if ($fixTable.length) {
                (scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
                $fixTable.css(style);
            } else {
                var html = $(id + ' .scrollTable thead').get(0).innerHTML;
                var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>');
                table.css(style);
                $(id).append(table);
                $fixTable = $(this).find('.fixTable');
            }
        });
    })
</script>
</body>
</html>
支持(0) 反对(0) BUTTERAPPLE | 园豆:2950 (老鸟四级) | 2018-03-23 11:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册