bootstrap-table 插件文档
更多 JS 插件：JS 插件文档及在线演示javascript
简单介绍
bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，可以实现数据异步获取，编辑，排序等一系列功能，最难得的是，只须要一些简单的配置就能够实现一个功能完备的在线表格。html
HTML 部分
bootstrap-table 具有异步获取数据功能，而后在前台渲染出表格。因此，前台只须要一句代码就解决了：前端
<table id="table"></table>
虽然它也支持将参数写在 HTML 页面中，可是我建议直接写在 JS 文件里，便于管理。java
引入文件
因为 bootstrap-table 除了自身提供的功能外，还支持不少第三方的插件，因此，引入文件的部分就显得尤为重要了，没准你调试半天的 Bug，只是由于忘了引入某个库文件。jquery
首先关注 3 个文件，dist 目录下的 bootstrap-table.css、bootstrap-table.js，若是使用中文，还要引用 locale/bootstrap-table-zh-CN.js，注意每一个文件均提供了min版本以及正常版本，建议在开发测试阶段引入正常版本，便于调试。固然最后不要忘了引入 bootstrap 以及 jQuery，最终效果以下：git
<!-- 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> 以前引入便可，以下所示：github
<!-- 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. 根目录依据本身项目而定ajax
JS 调用
前台放一个 table 标签便可，表格的结构，甚至于表格的操做都放到JS中实现，以下代码便可生成一个表格：bootstrap
$('#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-table中extensions中的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
}
});
});
筛选功能就到这，这里只是介绍了参数传递的方法，具体筛选，还须要结合后台代码去实现。
搜索功能
搜索分为前台搜索以及后台搜索。
- 前台搜索：学会使用5个表格参数（search、searchOnEnterKey、searchText、trimOnSearch、customSearch（自定义搜索）），2个列参数（searchable、searchFormatter），1个方法（resetSearch）便可
- 后台搜索，就相似于筛选功能的传参了，在后台处理字符串，返回表格数据，此不在本文范围内，很少赘述。
编辑功能
在线表格的编辑，实际上是最很差处理的一个功能。一方面，添加编辑功能须要增长不少额外的代码量；另外一方面，从业务上来说，编辑并非一个好的用户体验。在作编辑功能以前，我老是问本身，这块功能真的须要编辑吗？删除了从新添加行不行？
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参数用来异步访问后台，那么传递的参数有哪些呢？
pk在X-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个参数分别是：
- event: the jQuery event.
- value: the field value.
- row: the row record data.
- index: the row index.
相信看完这个示例，就能一并解决「查看」「编辑」「删除」等功能。bootstrap-table的使用就介绍到这里了，官方文档里还有好多参数以及方法没有介绍到，篇幅有限就再也不介绍了，需自行查看文档学习。
后台返回数据
对象数组，每一行数据为一个对象