文档章节

十四、bootstrap-table 展示数据

ssshen
 ssshen
发布于 2017/08/30 16:53
字数 536
阅读 65
收藏 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
粉丝 1
博文 34
码字总数 12481
作品 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
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

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

walb呀
2017/12/04
0
0
bootstrap-table对前台页面表格的支持

1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有   1)基本的还是jQuery   2)引入bootstrap...

小不点丶
2016/12/21
0
0
BootStrap中的JavaScript

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利) 前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧...

myy629464
2017/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

配置Spring的注解支持

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 配置Spring的注解支持 以上也提到了使用注解来配...

凯哥学堂
35分钟前
0
0
关于Spring Aop存在的一点问题的思考

在本人前面的文章Spring Aop原理之切点表达式解析中讲解了Spring是如何解析切点表达式的,在分析源码的时候,出现了如下将要讲述的问题,我认为是不合理的,后来本人单纯使用aspectj进行试验...

爱宝贝丶
37分钟前
0
0
JavaScript 概述

JavaScript是面向Web的编程语言。绝大多数现代网站都使用了JavaScript,并且所有的现代Web浏览器——基于桌面系统、游戏机、平板电脑和智能手机的浏览器——均包含了JavaScript解释器。这使得...

Mr_ET
今天
0
0
Java Run-Time Data Areas(Java运行时数据区/内存分配)

Java运行时数据区(内存分配) 本文转载官网 更多相关内容可查看官网 中文翻译可参考 2.5. Run-Time Data Areas The Java Virtual Machine defines various run-time data areas that are use...

lichuangnk
今天
0
0
docker learn :services docker-compose.yml

docker-compose.yml定义了服务的运行参数 version: "3" services: web: # replace username/repo:tag with your name and image details image: hub.c.163.com/dog948453219/friendlyhello d......

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部