文档章节

十四、bootstrap-table 展示数据

ssshen
 ssshen
发布于 2017/08/30 16:53
字数 536
阅读 78
收藏 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
海淀
程序员
私信 提问
【Bootstrap系列】详解Bootstrap-table

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

Alan_beijing
2018/09/10
0
0
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

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

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

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

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

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

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

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

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MaxCompute安全管理指南-基础篇

背景及目的 方便和辅助MaxCompute的project owner或安全管理员进行project的日常安全运维,保障数据安全。 MaxCompute有安全模型,DataWorks也有安全模型,当通过DataWorks使用MaxCompute,而...

阿里云官方博客
9分钟前
0
0
MaxCompute安全管理指南-案例篇

通过《MaxCompute安全管理-基础篇》了解到MaxCompute和DataWorks的相关安全模型、两个产品安全方面的关联,以及各种安全操作后,本篇主要给出一些安全管理案例,给安全管理的成员作为参考。 ...

阿里云云栖社区
12分钟前
0
0
show-busy-java-threads.sh

#!/bin/bash# @Function# Find out the highest cpu consumed threads of java, and print the stack of these threads.## @Usage# $ ./show-busy-java-threads## @online-d......

月下狼
16分钟前
0
0
基于Spring Boot和Spring Cloud实现微服务架构

前言 首先,最想说的是,当你要学习一套最新的技术时,官网的英文文档是学习的最佳渠道。因为网上流传的多数资料是官网翻译而来,很多描述的重点也都偏向于作者自身碰到的问题,这样就很容易...

架构师springboot
16分钟前
0
0
远程图片上传到七牛云的demo

from qiniu import Auth, BucketManager# 抓取文件到七牛def fetch(url): filename = str(time.time()).replace('.', '') # 获取鉴权对象 auth = Auth(access_key, secre......

Liens
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部