bootstrap table行内编辑与数据导出解决方案

bootstrap table表格的行内编辑功能与数据导出功能开发实践，主要用到两款插件bootstrap-table-editable和bootstrap-table-export。

行内编辑

简介

editable

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选项，如下：

{
  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。

下面是一个选择框的示例：

{
  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插件，还有个同名的。

{
  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的选项里。

/* 表内编辑完向后端发送请求 */
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处理：

a.editable {
    text-decoration: none;
    border-bottom: dashed 1px #fafafa;
}

数据导出

export

数据导出功能很好添加，引入插件加入一条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的选项里加入：

/* 数据导出插件 */
showExport: true,                                       //是否启用导出数据插件
exportDataType: 'basic',                                //basic', 'all', 'selected'.
exportOptions: {                                        //导出时忽略checkbox列
  ignoreColumn: ['check']
}

showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。

ignoreColumn可以指定忽略某些列，我这里是把每行开头的选择框排除了，可以自己根据需要配置一下。