前端 bootstrap-table的使用方法 2016年11月9日
学习
0 条评论

如何使用bootstrap-table实现一个美观而又功能强大的表格？

一、获取bootstrap-table

http://bootstrap-table.wenzhixin.net.cn/zh-cn/是一个国人开发的插件。

直接下载即可，这个插件同时依赖bootstrap和jquery，需要同时备齐这两个js。

二、在网页中引入js和css文件

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<link rel="stylesheet" href="css/bootstrap-vertical-menu.css">
 
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>

这些就差不多了，如果想更有逼格一点，可以不引入zh文件，换个别的什么语言文件，就能感受别国语言了。

三、如何使用？

使用js进行初始化（推荐），还有一种是直接在table标签处加上属性来初始化，我认为这种方式不好拓展功能，个人不推荐，还是使用js的方式靠谱。

（1）首先写出这样一个div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id" data-sortable="true">id</th>
            <th data-field="level" data-sortable="true">level</th>
            <th data-field="logclass" data-sortable="true">logclass</th>
            <th data-field="location" data-sortable="true">location</th>
            <th data-field="message" data-sortable="true">message</th>
            <th data-field="username" data-sortable="true">username</th>
            <th data-field="ip" data-sortable="true">ip</th>
            <th data-field="param" data-sortable="true">param</th>
            <th data-field="result" data-sortable="true">result</th>
            <th data-field="time" data-sortable="true">time</th>
        </tr>
        </thead>
    </table>
</div>

就是一个简单的表格，其中有两个需要解释的属性：

1.data-field

bootstrap-table是key-value形式显示数据的，后端传到前端的json自己解析然后自动显示。

data-field中填写json中对应的key。

例如：json中的键值对是”id”:”xie”, data-field=”id”，那么表格中就会自动填充”xie”。

2.data-sortable

这个是bootstrap-table用来做排序的，如果设置了这个值，就可以在前端或者后端分页中对数据进行排序(前端分页不用往后端传值，后端分页需要传值，仅此而已)。如果不需要排序，就不用加上这个属性。

（2）写出这样的js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var table = $("table");
 
    function showTable() {
        table
                .bootstrapTable({
                    search: true,//是否使用搜索
                    pagination: true,//是否使用分页，默认前端分页
                    showRefresh: true,//是否使用刷新按钮，默认没有
                    url: "../api/server/selectServerList",//后端数据来源地址
                    method: 'post',//后端请求方法
                    cache: false,//是否使用缓存
                    escape: true,//前端自动转义
                    showColumns: true,//换个显示方式
                    showToggle: true,//同上
                    sidePagination: 'server',//分页方式
                    queryParams: queryParams,//请求后端时的数据格式
                    pageSize: 10,//分页大小
                    toolbar: '#toolbar',//自定义工具类，可以融合在表格中
                    clickToSelect: true,//单击选择当前条目
                    showExport: true,//显示导出按钮
                    exportDataType: "basic"//导出类型
                });
    }
 
    $(function () {
        showTable();
    });
 
    function queryParams(params) {
 
        return {
            limit: params.limit,//每页数据条数
            offset: params.offset,//当前页偏移
            order: params.order,//排序
            ordername: params.sort,//需要排序的字段
            search: params.search//搜索的字段
        };
    }

$(function () {showTable();});在页面加载时就调用showTable()，进行表格的生成。

这里是我常用的后端分页的情况，下面选些重要的解释：

  1. search：是否使用搜索，如果为true，就会多出一个搜索框。在前端分页的情况下，会在前端直接在对象中进行搜索。如果是后端分页，就会在请求后端数据时添加一个search参数，由后端进行搜索处理。
  2. url:从后端获取数据的地址。从哪里获取表格数据？就从这里了。
  3. method:请求后端的方法。前端分页可以用get，后端基本上只能用post了。
  4. escape:有没有经历过被xss的痛苦？这个属性支持特殊字符自动转义，再也不怕被x。
  5. sidePagination: 决定前后端分页，有server和client两个选项
  6. queryParams:请求后端时的参数，特别容易出错，需要注意。
  7. pageSize:分页大小，会自动根据数据量来决定，不用太在意。

四、后端实现

参考如下文章：

https://xie4ever.com/2016/10/15/spring-mvc-%e6%95%b4%e5%90%88page-helper/

特别需要注意，如果使用的是后端分页，需要传入类似这样的实体类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
package com.xie.pojo;
 
public class pagePojo {
 
private int limit = 10;// 每页限制数,默认为10
private int offset = 1;// 当前页偏移,默认为1
private String order;// 排序
private String ordername;// 排序列名称
private String search;// 搜索内容
 
public int getLimit() {
return limit;
}
 
public void setLimit(int limit) {
this.limit = limit;
}
 
public int getOffset() {
return offset;
}
 
public void setOffset(int offset) {
this.offset = offset;
}
 
public String getOrder() {
return order;
}
 
public void setOrder(String order) {
this.order = order;
}
 
public String getOrdername() {
return ordername;
}
 
public void setOrdername(String ordername) {
this.ordername = ordername;
}
 
public String getSearch() {
return search;
}
 
public void setSearch(String search) {
this.search = search;
}
 
@Override
public String toString() {
return "userPagePojo [limit=" + limit + ", offset=" + offset + ", order=" + order + ", ordername=" + ordername
+ ", search=" + search + "]";
}
}

这个实体类基本上是固定的，不需要怎么改动。

五、关于前后端分页的选择

这个其实是一开始就要确定好的。是否需要分页？是前端分页还是后端分页？（区别在于，前端分页很省事，在数据量不多的时候可以使用，但是如果多了，会造成性能问题。后端分页需要自己实现，比较复杂，但是效率和性能都很好，适用各种情况）

如果是前端分页，那就把sidePagination改成client或者根本就不加这个属性(默认就是前端分页)，然后不需要传参数(不需要queryParam这个属性了)。只需要后端访问地址（只需要url属性）。后端直接给出一个所有数据的list，自动转化成json，前端帮你对应展示，就搞定了，确实很省事。

或者直接就使用table加属性的方式来生成表格，默认就是前端分页。

后端分页，就可以参考我写的那个例子了。把sidePagination改成server，给定传输数据的格式，然后后端进行分页处理，给出包含总页数，偏移量，数据…的json，只要做到对应，前端就会自动处理json数据并且展示。

六、实现效果

1

这个界面是加了特技。左上角的增删改操作不是自带的，其他的基本都是原生。

七、总结

感觉很好用哦，在很多使用表格进行数据展示的时候都可以使用！

Post Views: 420