十四、bootstrap-table 展示数据

发布时间：2020-12-17 20:54:21 所属栏目：安全来源：网络整理

导读：最开始使用js拼接成table中的行，追加到table上，来实现数据的展示，需要写好多之类的html标签，不美观，而且也不便于维护；后期改用bootstrap-table实现数据的展示和加载，一下子就从繁琐的html拼接中解放出来了，github地址：https://github.com/wenzhixin

最开始使用js拼接成table中的行，追加到table上，来实现数据的展示，需要写好多之类的html标签，不美观，而且也不便于维护；后期改用bootstrap-table实现数据的展示和加载，一下子就从繁琐的html拼接中解放出来了，github地址：https://github.com/wenzhixin/bootstrap-table

bootstrap-table支持导出、查找、隐藏列，还可以添加toolbar 结合js实现自己定制化的功能，简直是前端表格展示的福音。

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.css">
    <script type="text/javascript" src="/static/js/bootstrap-table.js"></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-table-export.js"></script>
    <script type="text/javascript" src="/static/js/tableExport.js"></script>
</head>

<body>
    <div class="mycontainer">
        <table id="example" data-toggle="table" class="table table-bordered none-padding" data-show-columns="true" data-sort-name="viewId" data-sort-order="asc" data-show-export="true" data-toolbar="#selectModule">
            <thead>
                <tr>
                    <th data-field="viewId" data-sortable="true">需求ID</th>
                    <th data-field="summary">主题</th>
                    <th data-field="viewIssueType" data-sortable="true">需求类型</th>
                    <th data-field="viewState" data-sortable="true">状态</th>
                    <th data-field="developer">开发人员</th>
                    <th data-field="tester">测试人员</th>
                    <th data-field="developUseTime" data-sortable="true">开发耗时(h)</th>
                    <th data-field="testUseTime" data-sortable="true">测试耗时(h)</th>
                    <th data-field="smokeState">冒烟情况</th>
                    <th data-field="submitTestTimes" data-sortable="true">提测轮次(次)</th>
                    <th data-field="totalBug" data-sortable="true">bug数(个)</th>
                    <th data-field="datee">上线日期</th>
                    <th data-field="remark">其他说明</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

javascript：

<script>
$(document).ready(function(e) {
    reloadData();
});

function reloadData() {
    // 重新展示table时，清空除标题外的其他数据
    $("table").find("tr:gt(0)").remove();

    data = [{
        "remark": "","submitTestTimes": "1","datee": "2017-08-30","tester": "aaa","viewId": "","developUseTime": "0.8","summary": "测试数据1","testUseTime": "0.8","ownedGroup": "aaa","smokeState": "过","totalBug": 0,"viewIssueType": "测试数据","viewState": "测试数据1","id": 1331,"developer": "1"
    },{
        "remark": "","submitTestTimes": "9","datee": "2017-08-31","tester": "测试人员2","viewId": "20868","developUseTime": "8.0","summary": "测试数据2","testUseTime": "4.0","smokeState": "aaa","viewIssueType": "aaa","viewState": "pass","id": 1332,"developer": "测试数据2"
    }];
    $('#example').bootstrapTable('load',data);
    //查出数据之后，延迟一下在变查询按钮，防止多次点击
    setTimeout(function() {
        alert('延迟2s弹出');
    },2000);
};
</script>

效果如下：

输入图片说明

参考文章：
Examples Bootstrap http://bootstrap-table.wenzhixin.net.cn/examples/
bootstrap-table github地址 https://github.com/wenzhixin/bootstrap-table

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!