Bootstrap Table之动态构建表格

发表于 更新于 分类于 阅读次数：

本文主要介绍在实际项目中遇到的如何用Bootstrap Table来动态构建表格，即仅用一个Bootstrap Table构建函数就可以构建多种表格数据，而不用为每个表格都维护一套构建函数，这对于有上百种表格的业务是非常有必要的。

简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap Table是基于 Bootstrap 的 jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

Bootstrap Table的下载使用和基础用法这里就不多啰嗦了，参考Bootstrap官方中文文档和Bootstrap Table中文文档。

设计

首先，既然可以动态构建表格，也就是表是变化的。那么在构建表时必定有表名这一参数来决定构建那张表，因此要把表名参数发送到后端来获取具体的表格内容数据，相应的后端要设计为可以接受表名参数。（这里后端可以考虑两种实现方式，一种是提供一个接收表名参数的方法，该方法根据表名进行映射，将查询逻辑打到具体的查询该表名的方法上，但这种方式需要后端为每张表设计具体的增删改查方法，表多了后扩展性不强；另一种就是后端也设计为动态的，提供统一的查询接口，使用动态sql拼接表名参数进行增删改查，这种方式扩展性强，不过灵活性有限）。

其次，表名变了，那是不是表的相应字段也变了，也就是列信息也需要动态构建，这可以通过将表名发送到后端来查询相应的字段名，并返回给前端。通常可以在页面初始化时请求获得各表的字段信息，来节省构建Bootstrap Table的加载时间（不需要每次构建都去请求列头信息）。

实现

后端

简单介绍下用到的后端接口，如果你后端设计的没问题这里可以略过。

后端接口包括页面初始化接口和表查询接口。(方法体已省略，接口名称请自定义)

页面初始化接口用来前端页面初始化时返回所有的表名和各表相应的字段名。表名可以用来构建查询下拉框，字段名用来构建各个表的Bootstrap Table列头。

1
2
3
4
5
@ResponseBody
@RequestMapping(value = "/data", method = { RequestMethod.GET })
public JsonModel getTableNameAndField() {
  //...
}

表查询接口，使用动态sql，也就是所有表共用一套增删改查接口，这里给出查询接口。

1
2
3
4
5
@ResponseBody
@RequestMapping(value = "/data/query", method = { RequestMethod.POST })
public JsonModel getAllByTableName(@RequestParam("tableName") String tableName) {
  //...
}

具体的动态SQL可以用MyBatis实现，这里给出MyBatis的Mapper.xml中获取表名、字段名 和 查询表数据的sql示例。

获取表名（table_name_list为存储所有表名的表）：

1
2
3
<select id="selectTableNames" resultType="java.lang.String">
  select table_name from table_name_list;
</select>

获取字段名：

1
2
3
<select id="selectColumns" resultType="java.lang.String" parameterType="java.lang.String">
  select column_name from information_schema.columns where TABLE_SCHEMA = '你的库名' and table_name = #{tableName,jdbcType=VARCHAR}
</select>

查询表数据（columnList是selectColumns返回的字段列表）：

1
2
3
4
5
6
7
8
<select id="selectByTableName" resultType="java.util.Map" parameterType="java.util.Map">
  SELECT
  <foreach collection="columnList" item="column" separator=",">
    ${column}
  </foreach>
  FROM
  ${tableName}
</select>

前端

首先在html中要显示表格的位置加入下面一句：

1
<table id="bootstrap-table"></table>

接下来是js中的页面初始化获取表名和字段名，填充查询下拉框，用jQuery实现。（如果有权限信息来控制页面显示，也可以在页面初始化时获取）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var tableNames = [];                                     //表名数组
var tableFields = [];                                    //字段名数组
var selectValue = $('#selectBox').val();                 //下拉框当前值

function init() {
  $.ajax({
    type: 'GET',
    url: '/data'
  }).done(function (res) {
    if (res && res.ret) {
      res.data.list.forEach(function (ele, index) {	//res为后端返回的json，ele为json封装的具体数据对象，包括tableName和tableField属性。
        tableNames[index] = ele['tableName'];          	
        tableFields[ele['tableName']] = ele['tableField'];     
      });
      tableNames.forEach(function (ele, index) {
        $('#selectBox').append("<option value='" + ele + "'>" + ele + "</option>");
      });
    }
  });
}

最后是Bootstrap Table的构建，可以将构建方法绑定在查询按钮点击事件上。

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
61
function initTable() {
    $('#bootstrap-table').bootstrapTable({

        /*向服务器发送请求*/
        url: '/data/query',          //请求后台的URL
        method: 'post',                                         //请求方式，默认为get
        contentType: 'application/x-www-form-urlencoded',       //发送到服务器的数据编码类型，默认为json
        queryParams: function (params) {                        //请求参数，必须与controller接收参数一致
            return {
                tableName: selectValue,                         //下拉框当前值，即要查询的表
            };
        },

        /*是否使用缓存，默认为true*/
        cache: false,

        /*分页相关*/
        pagination: true,                                       //是否显示分页.默认false
        sidePagination: 'client',                               //分页方式：client客户端分页，server服务端分页，默认client

        /*样式、组件相关*/
        toolbar: '#toolbar',                                    //工具按钮用哪个容器
        striped: true,                                          //是否隔行变色，默认false
        sortable: true,                                         //是否启用排序，默认true
        search: true,                                           //是否显示搜索框
        searchAlign: 'left',                                    //搜索框水平位置，默认right
        strictSearch: true,                                     //设置为true启用全匹配搜索，默认false模糊搜索
        showColumns: true,                                      //是否显示指定列下拉框
        showRefresh: true,                                      //是否显示刷新按钮
        showToggle: true,                                       //是否显示详细视图和列表视图的切换按钮
        clickToSelect: true,                                    //设置true将在点击行时，自动选择rediobox和checkbox
        rowStyle: function (row, index) {                       //隔行变色
            return {classes: (index % 2 === 0) ? '' : 'info'}
        },

        /*加载服务器数据之前的处理程序，可以用来格式化数据,
         *res为服务端返回的json对象
         *分页方式为server时，必须包含rows和total字段*/
        responseHandler: function (res) {
            return res.data.list;
        },

        /*动态获取列信息*/
        columns: getColumns()
    });
}

function getColumns() {
    var columns = [];
    columns.push({
        checkbox: true
    });
    tableFields[selectValue].forEach(function (ele, index) {
        columns.push({
            field: ele['title'],
            title: ele['title'],
            sortable: true
        });
    });
    return columns;
}

页面展示

20170626124422925

以上就是Bootstrap Table动态构建表格的具体实现，代码中有些要根据自己情况改，有问题欢迎交流。