简单介绍

官方地址:Bootstrap Table · An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)


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


image.png


HTML 部分

bootstrap-table 具备异步获取数据功能,然后在前台渲染出表格。所以,前台只需要一句代码就解决了:


<table id="table"></table>


虽然它也支持将参数写在 HTML 页面中,但是我建议直接写在 JS 文件里,便于管理。


引入文件

由于 bootstrap-table 除了自身提供的功能外,还支持很多第三方的插件,所以,引入文件的部分就显得尤其重要了,没准你调试半天的 Bug,只是因为忘了引入某个库文件。


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


<!-- CSS 部分 -->
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<!-- Bootstrap table -->
<link rel="stylesheet" href="/bootstrap-table/dist/css/booststrap-table.min.css">


js 文件建议放到页面最底下,在 </body> 之前引入即可,如下所示:


<!-- JS 部分 -->
<!-- jQuery 3 -->
<script src="/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<script src="/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>


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


JS 调用

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


$('#table').bootstrapTable({
    url: '/bootstrap-table/data',        // 表格数据来源
    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 中定义了表格的数据来源,返回数据的格式依然是包含数据对象的数组。由于该框架提供的参数比较多,而实际项目并用不着这么多配置,这里给出,我建议的一个方案,供参考。



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


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


添加功能

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



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


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


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


导入功能

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


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


<!-- bootstrap-table export -->
<script src="/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/tableexport.jquery.plugin/tableExport.min.js"></script>


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


showExport: true


筛选功能

这个是在线表格最重要的功能之一。因为我们不可能一次性将后台所有数据都拉到前台展示。如果你之前使用过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请求,可以看出传递参数情况。



通过上述自定义参数方式,就可以筛选部分数据到前台,然后通过配置分页参数就可以实现筛选功能了。那么一般设置什么参数筛选呢?其实就是想问一次性筛选多少条数据最合适呢?我的建议是在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
        }
    });
});


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


搜索功能

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



编辑功能

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


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


还是老套路,引入3个文件(其中:1个css,2个js):


<!-- X-editable -->
<link rel="stylesheet" href="/X-editable/dist/bootstrap3-editable/css/bootstrap-editable.css">

<!-- booststrap-table editable -->
<script src="/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js"></script>
<script src="/X-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>


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



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


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


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



pkX-editable中定义为主键,在bootstrap-table中,通过设置表格参数idField: 'id',可以定义行数据的主键。若改成idField: 'name',再来看下:



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


删除功能

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


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



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 '<a href="#">' + 
            '<i class="glyphicon glyphicon-eye-open" title="显示"></i> ' + 
            '</a>'+ 
            '<a href="#editProject" data-toggle="modal" title="修改">' + 
            '<i class="glyphicon glyphicon-pencil"></i> ' + 
            '</a>'+
            '<a href="javascript:void(0)" title="删除">' +
            '<i class="glyphicon glyphicon-trash text-danger"></i> ' + 
            '</a>';
    },
    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个参数分别是:



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


后台返回数据

对象数组,每一行数据为一个对象