十四、bootstrap-table 展示数据
博客专区 > ssshen 的博客 > 博客详情
十四、bootstrap-table 展示数据
ssshen 发表于6个月前
十四、bootstrap-table 展示数据
  • 发表于 6个月前
  • 阅读 41
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

最开始使用js拼接成table中的行,追加到table上,来实现数据的展示,需要写好多<td><a>之类的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",
        "ownedGroup": "aaa",
        "smokeState": "aaa",
        "totalBug": 0,
        "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

标签: Bootstrap-table
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 31
码字总数 10565
×
ssshen
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: