bootstrap table表格的行内编辑功能与数据导出功能开发实践，主要用到两款插件bootstrap-table-editable和bootstrap-table-export。
行内编辑
简介
bootstrap table行内编辑使用其上的插件bootstrap-table-editable解决，支持如上图在提示框编辑或者纯行内编辑两种方式，默认提示框里编辑，看起来更直观一些，纯行内编辑会暂时性引起表格列宽变化。总的来说还是很方便的，可以省去很多次点击操作，用户体验较好，看起来也高大上。有句话说，表格编辑对用户体验来说，行内编辑是最佳体验方案，弹出框其次，页面跳转最次。
但是这款插件有个不方便的地方是，支持的编辑类型不能涵盖一些第三方插件，比如地点可能需要省市区插件编辑，而editable是不支持这些插件的。当然，一般的编辑类型基本都涵盖了。
使用
下面来看一下如何使用，github链接https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable。
首先，bootstrap-table-editable插件是基于x-editable这款插件的，所以不要忘了引入x-editable，以下是引入css和js的语句。
1
2
3
| <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap-table-editable.min.js"></script>
|
引入js之后，会默认在bootstrap table构建的option里添加editable: true，不需要我们再配置该选项。
然后就是在bootstrap table的columns选项，为需要支持可编辑的列添加editable选项，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| {
title: '事件名称',
field: 'name',
sortable: false,
searchable: true,
editable: {
type: 'text',
placeholder: '请输入（30字内，必填）',
validate: function (value) {
if (!value) {
return '事件名称不能为空';
}
if (value.length > 30) {
return '事件名称不能超过30字'
}
}
}
};
|
editable内的type指定列类型，placeholder指定默认显示字符，validate是校验提示信息。各项含义还是比较清楚的，具体更多配置见http://vitalets.github.io/x-editable/docs.html#editable。
下面是一个选择框的示例：
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
| {
title: '事件类型',
field: 'type',
sortable: true,
searchable: true,
editable: {
type: 'select',
source: [{
value: 'aa',
text: 'aa'
}, {
value: 'bb',
text: 'bb'
}, {
value: 'cc',
text: 'cc'
}, {
value: 'dd',
text: 'dd'
}],
validate: function (value) {
if (!value) {
return '事件类型不能为空';
}
}
}
};
|
再举个日期配置的例子吧,editable支持datetimepicker插件，注意全称是smalot-bootstrap-datetimepicker插件，还有个同名的。
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
| {
title: '开始时间',
field: 'startTime',
sortable: true,
searchable: true,
editable: {
type: 'datetime',
placement: 'left',
format: 'yyyy-mm-dd hh:ii',
datetimepicker: {
format: 'yyyy-mm-dd hh:ii',
startDate: '2010-01-01',
endDate: '2025-01-01',
language: 'zh-CN',
todayBtn: true,
todayHighlight: true,
minuteStep: 1
},
validate: function (value) {
if (!value) {
return '开始时间不能为空';
}
}
}
}
|
其中的datetimepicker选项，是datetimepicker自身选项。
最后不要忘了，添加编辑完后的处理事件，一般是向后端发送ajax请求，如下，该选项是添加在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
|
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/event/update",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(row),
success: function (res, status) {
if (res.status !== 0) {
$('#bootstrap-table').bootstrapTable('refresh');
var div = $('<div class="imporMsg"></div>');
div.text(res.message);
BootstrapDialog.show({
size: 'size-wide',
title: '提示',
message: div,
buttons: [{
label: '关闭',
cssClass: 'btn btn-primary',
action: function (dialog) {
dialog.close();
}
}]
});
}
}
});
}
|
OK，这样行内编辑就生效了。
如果需要根据用户是否有编辑权限开启此功能，可以添加一个权限标志位，默认的columns不带editable，当标志位为true时，动态为这些列添加editable。
此外，默认可编辑列显示风格是超链接，会带着下划线，满屏下划线可能不太舒服，如果不想要可以做以下css处理：
1
2
3
4
| a.editable {
text-decoration: none;
border-bottom: dashed 1px #fafafa;
}
|
数据导出
数据导出功能很好添加，引入插件加入一条option就可以。
github链接：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export.
同样，bootstrap-table-export基于tableExport.jquery.plugin，不要忘了一并引入，如下引入：
1
2
| <script src="${pageContext.request.contextPath}/static/js/tableExport.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap-table-export.js"></script>
|
之后在bootstrap table的选项里加入：
1
2
3
4
5
6
|
showExport: true,
exportDataType: 'basic',
exportOptions: {
ignoreColumn: ['check']
}
|
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。
ignoreColumn可以指定忽略某些列，我这里是把每行开头的选择框排除了，可以自己根据需要配置一下。