文档章节

十四、bootstrap-table 展示数据

ssshen
 ssshen
发布于 2017/08/30 16:53
字数 536
阅读 71
收藏 0

最开始使用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

© 著作权归作者所有

共有 人打赏支持
ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往...

walb呀
2017/12/04
0
0
【Bootstrap系列】详解Bootstrap-table

本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等。 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享。 一...

Alan_beijing
09/10
0
0
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0
layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table、layui table、easyUI ...

xianrenqh
10/10
0
0
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
1
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
1
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
4
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
3
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部