Bootstrap-Table 表格插件

JS 插件文档库邀你一起协同创作 -

Bootstrap-Table

Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。

1. 准备

不同于tabledit，Bootstrap-Table是提供异步获取数据功能的，这里的准备工作暂不用管前台页面结构。因为前台页面结构中的表格，只需要一句代码就解决了：

我们要关心的是，正确的引入Bootstrap Table的相关文件，功能越完备意味着，需要加载的第三方库越多。

首先关注3个文件，dist目录下的bootstrap-table.css、bootstrap-table.js，如果使用中文，还要引用locale/bootstrap-table-zh-CN.js，注意每个文件均提供了min版本以及正常版本，建议在开发测试阶段引入正常版本，便于调试。当然最后不要忘了引入bootstrap以及jQuery的文件，最终效果如下：

js文件建议放到页面最底下，在之前引入即可，如下所示：

注意：1. 顺序不要乱；2. 根目录依据自己项目而定

2. 初步使用

前台放一个table标签即可，表格的结构，甚至于表格的操作都放到JS中实现，如下代码即可生成一个表格：

$('#table').bootstrapTable({
    url: '/json/data.json',        // 表格数据来源
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    },{
        field: 'column1',
        title: '列1'
    },{
        field: 'column2',
        title: '列2' 
    },{
        field: 'column3',
        title: '列3'
    },{
        field: 'column4',
        title: '列4'
    } ]
});

url中定义了表格的数据来源，返回数据的格式依然是包含数据对象的数组，这点不再赘述。由于该框架提供的参数比较多，而实际项目并用不着这么多配置，这里给出，我建议的一个方案，供参考。

image.png

右上角的一些功能，通过配置一些参数即可实现，无需多余的代码。这个查看官方文档，基本没有什么问题，这里不多介绍了。

左上角是一些自定义的一些功能，这里有添加数据，筛选数据（本地&异步），再加上编辑数据，基本就完成了表格的增删改查需求，这个我在后面会一一介绍。

3. 功能实现

在这里，我会介绍在实际项目中要用到的一些实用功能点。主要分为：添加，导出，筛选，搜索，编辑以及删除。

（1）添加功能

根据一些实际项目的经验，采用弹出模态框的方式，是最优雅的添加方式。如下图所示：

image.png

这个是bootstrap自带的一个插件，直接引入页面中即可，至于表单的提交方式是采用form原生提交，还是使用ajax异步提交，就取决于你的喜好了。这块内容不在文章范围内，就不多介绍了。

需要注意的是：假如你采用的是ajax异步提交表单，那么就需要调用bootstrap-table的refresh方法，用来更新表格数据。

$('#table').bootstrapTable('refresh');

（2）导入功能

每次在做信息化类项目的时候，导出功能是我最不愿意去做，但也必须要实现的功能。不愿做并不是因为很难实现，这是一个原则问题，信息化就是为了减少或是废除线下操作，然而在传统企业却根本行不通，因为不管你的用户体验做得有多好，也改变不了用户「不愿尝试改变」的劣根性。

Bootstrap-Table提供了导出扩展模块，简单配置就可以轻松实现导出功能。首先需要引入两个文件，一个是Bootstrap-Table中extensions中的bootstrap-table-export扩展；另一个是tableExport的插件。效果如下：

引入扩展文件后，在表格参数中加入如下一句配置即可：

showExport: true

（3）筛选功能

这个是在线表格最重要的功能之一。因为我们不可能一次性将后台所有数据都拉到前台展示。如果你之前使用过Bootstrap-Table，你可能知道它提供了一个sidePagination的参数，这个参数是定义在哪里进行分页，可选值为 client 或者 server。默认为client，当你设置为 server时，每次请求后台服务器，都会加上limit, offset, search, sort, order这几个参数，传到后台让你去处理数据分页。

这里我想告诉你，完全没有必要这么麻烦，实际项目中，我们都是通过参数条件，筛选一部分数据展示到前台。所以你定义好默认的参数就可以了，分页的事就交给前端处理即可。那么参数如何自定义呢？使用queryParams表格参数即可。举个例子：

queryParams: function(params){
  return {
    startDate: '2018/09/01',
    endDate: '2019/09/01'
  };
},

查看Chrome Network请求，可以看出传递参数情况。

image.png

通过上述自定义参数方式，就可以筛选部分数据到前台，然后通过配置分页参数就可以实现筛选功能了。那么一般设置什么参数筛选呢？其实就是想问一次性筛选多少条数据最合适呢？我的建议是在500以内，这样既方便处理数据，也不会太影响性能。

前台分页的好处，主要体现在搜索这块，完全不用自己去实现代码，简单配置搜索框即可，而且提供的是全局搜索，很强大了。如果想配置个本地筛选也是很方便的，使用resetSearch方法即可。

// 本地筛选
$('#localFilter li a').click(function(e){
    e.preventDefault();
    var filter = $(this).data('filter');
    $table.bootstrapTable('resetSearch', filter);
});

有时候，我还是想要从后台筛选部分数据，通过前台表单，使用 refresh方法即可。

// 异步筛选
$('#Filter').submit(function(e){
    e.preventDefault();
    var filter = $('input[name=filter]').val();
    $table.bootstrapTable('refresh',{
        query: {
          startDate: '2001/09/01',
          endDate: '2008/09/01',
          filter: filter
        }
    });
});

筛选功能就到这，这里只是介绍了参数传递的方法，具体筛选，还需要结合后台代码去实现。

（4）搜索功能

搜索分为前台搜索以及后台搜索。

• 前台搜索：学会使用5个表格参数（search、searchOnEnterKey、searchText、trimOnSearch、customSearch（自定义搜索）），2个列参数（searchable、searchFormatter），1个方法（resetSearch）即可
• 后台搜索，就类似于筛选功能的传参了，在后台处理字符串，返回表格数据，此不在本文范围内，不多赘述。

（5）编辑功能

在线表格的编辑，其实是最不好处理的一个功能。一方面，添加编辑功能需要增加很多额外的代码量；另一方面，从业务上来讲，编辑并不是一个好的用户体验。在做编辑功能之前，我总是问自己，这块功能真的需要编辑吗？删除了重新添加行不行？

Bootstrap-Table提供了editable编辑模块，简单配置即可实现表格的编辑，但是我还是想要提醒，使用编辑功能需要有节制，越自由并不代表用户体验越好。

还是老套路，引入3个文件（其中：1个css，2个js）：

引入之后，直接在列参数上加上editable: true，即可启用该字段的标记功能，效果图如下：

image.png

样式没有问题后，接下来看看如何使用，使用方法完全沿用了X-editable插件，bootstrap-table-editable仅仅只是做了嵌入的工作，所以你需要查看X-editable的文档，这里我举个简单的例子介绍一下，如下为其中一列的参数设置：

{
  field: 'column2',
  title: '列2',
  editable: {
    url: '/test',
  },
}

url参数用来异步访问后台，那么传递的参数有哪些呢？

image.png

pk在X-editable中定义为主键，在Bootstrap-Table中，通过设置表格参数idField: 'id'，可以定义行数据的主键。若改成idField: 'name'，再来看下：

image.png

明白了如何传参数，相信你就知道后面如何处理了。

（6）删除功能

介绍完编辑功能，不知道你有没有发现，假如我们要编辑的字段非常多，这种处理方式会给后台造成很大的工作量，能不能一个表单就解决编辑需求呢？当然是可以的。

我们在每一行的最后加上一列，放上一些功能按钮，如下图：

image.png

在columns表格参数中，加上一列如下：

{
    field: 'operator',
    title: '操作',
    align: 'center',
    valign: 'middle',
    width: '10%',
    // visible: false,
    formatter: function (value, row, index) {
        // var sid_code = base64encode(row.sid + '');   //  sid 加密处理
        // alert(sid_code);
        return '' + 
            ' ' + 
            ''+ 
            '' + 
            ' ' + 
            ''+
            '' +
            ' ' + 
            '';
    },
    events: {
      'click a[title=删除]': function (e, value, row, index) {
          if(confirm('此操作不可逆，请确认是否删除？')){
              $.ajax();
          }
      },
      'click a[title=修改]': function (e, value, row, index) {
          // e.preventDefault();
          alert('click change button');
      },
    }
}

4个参数分别是：

• event: the jQuery event.
• value: the field value.
• row: the row record data.
• index: the row index.

相信看完这个示例，就能一并解决「查看」「编辑」「删除」等功能。Bootstrap-Table的使用就介绍到这里了，官方文档里还有好多参数以及方法没有介绍到，篇幅有限就不再介绍了，需自行查看文档学习。

更多Chat...