JS表格组件BootstrapTable行内编辑解决方案x-editable

前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的朋友可以移步。

一、x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。 x-editable开源地址： x-editable文档地址： x-editable在线Demo：

1、x-editable初体验

首先下载基于bootstrap的源码到本地。引用相关文件。

rush:xhtml;">

页面元素

代码如下:

js初始化

效果展示

上面是通过html的data属性去设置x-editable的参数，当然，我也可以在初始化的时候去设置参数，比如，我仅仅给一个空的a标签：

rush:js;"> $(function () { $('#username').editable({ type: "text",//编辑框的类型。支持text|textarea|select|date|checklist等 title: "用户名",//编辑框的标题 disabled: false,//是否禁用编辑 emptytext: "空文本",//空值的默认文本 mode: "inline",//编辑框的模式：支持popup和inline两种模式，默认是popup validate: function (value) { //字段验证 if (!$.trim(value)) { return '不能为空'; } } });

});

查看效果

再来个稍微复杂一点的

});

查看效果

上文只是给出了一些常用字段，当然x-editable组件还有很多其他的功能参数，有兴趣可以看看文档，官方文档对每个参数都有详细的说明。

二、bootstrapTable行内编辑初始方案

说了这么半天，上面的只是铺垫，我们最终是希望在bootstrapTable里面实现行内编辑。根据上面的规则，我们想要使用x-editable实现行内编辑，表格的单元格里面必须要有一个a标签，然后对a标签做x-editable的初始化。有了这个想法，我们按照这种思路先试试。

引用相关文件

bootstrapTable的相关初始化

"; } },{ field: "Age",title: "年龄",},{ field: "Birthday",title: "生日",index) { var date = eval('new ' + eval(value).source) return date.format("yyyy年MM月dd日"); } },{ field: "DeptName",title: "部门" },{ field: "Hodd",title: "爱好" }],onClickRow: function (row,$element) { curRow = row; },onLoadSuccess: function (aa,bb,cc) { $("#tb_user a").editable({ url: function (params) { var sName = $(this).attr("name"); curRow[sName] = params.value; $.ajax({ type: 'POST',url: "/Editable/Edit",data: curRow,dataType: 'JSON',success: function (data,textStatus,jqXHR) { alert('保存成功！'); },error: function () { alert("error");} }); },type: 'text' }); },}); });

后台 方法

后台测试方法

rush:java;"> public JsonResult GetUsers() { var lstRes = new List(); lstRes.Add(new User() { Id = "1",UserName = "张三",Age = 22,Birthday = Convert.ToDateTime("1994-12-21"),DeptId = "1",DeptName = "研发部" }); lstRes.Add(new User() { Id = "2",UserName = "李四",Age = 28,Birthday = Convert.ToDateTime("1988-09-09"),DeptId = "2",DeptName = "销售部" }); lstRes.Add(new User() { Id = "3",UserName = "风衣大叔",Age = 40,Birthday = Convert.ToDateTime("1976-09-01"),DeptName = "销售部" }); lstRes.Add(new User() { Id = "4",UserName = "闪电大虾",Age = 37,Birthday = Convert.ToDateTime("1979-03-12"),DeptId = "4",DeptName = "创意部" }); lstRes.Add(new User() { Id = "5",UserName = "韩梅梅",Age = 29,Birthday = Convert.ToDateTime("1987-05-01"),DeptId = "5",DeptName = "事业部" });

return Json(lstRes,JsonRequestBehavior.AllowGet);
}

public JsonResult Edit(User user)
{
//反序列化之后更新

return Json(new { },JsonRequestBehavior.AllowGet);
}

这样确实是可以实现想要的效果，貌似也能行内编辑了，可是如果没个列都需要行内编辑，并且列的个数很多，那么是不是每个列都得这样去formmater？并且这种写法狠显然很死板，博主着实难以接受。于是又找了找例子，发现在bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。

三、bootstrapTable行内编辑最终方案

好吧，博主承认，上面还是铺垫，因为博主觉得这可能是解决问题的一般思路，所以将这些铺垫的篇幅可能有点多。首先来看看bootstrap-table-editable.js这个文件：

rush:js;"> /** * @author zhixin wen * extensions: https://github.com/vitalets/x-editable */

!function ($) {

'use strict';

$.extend($.fn.bootstrapTable.defaults,{
editable: true,onEditableInit: function () {
return false;
},onEditableSave: function (field,oldValue,$el) {
return false;
},onEditableShown: function (field,$el,editable) {
return false;
},onEditableHidden: function (field,reason) {
return false;
}
});

$.extend($.fn.bootstrapTable.Constructor.EVENTS,{
'editable-init.bs.table': 'onEditableInit','editable-save.bs.table': 'onEditableSave','editable-shown.bs.table': 'onEditableShown','editable-hidden.bs.table': 'onEditableHidden'
});

var BootstrapTable = $.fn.bootstrapTable.Constructor,_initTable = BootstrapTable.prototype.initTable,_initBody = BootstrapTable.prototype.initBody;

BootstrapTable.prototype.initTable = function () {
var that = this;
_initTable.apply(this,Array.prototype.slice.apply(arguments));

if (!this.options.editable) {
return;
}

$.each(this.columns,function (i,column) {
if (!column.editable) {
return;
}

var _formatter = column.formatter;
column.formatter = function (value,index) {
var result = _formatter ? _formatter(value,index) : value;

return ['<a href="javascript:void(0)"',' data-name="' + column.field + '"',' data-pk="' + row[that.options.idField] + '"',' data-value="' + result + '"','>' + '</a>'
].join('');

};
});
};

BootstrapTable.prototype.initBody = function () {
var that = this;
_initBody.apply(this,column) {
if (!column.editable) {
return;
}

that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('save').on('save',function (e,params) {
var data = that.getData(),index = $(this).parents('tr[data-index]').data('index'),row = data[index],oldValue = row[column.field];

 row[column.field] = p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms.submitValue;
 that.trigger('editable-save',column.field,$(this));
});

that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('shown').on('shown',editable) {
var data = that.getData(),row = data[index];

 that.trigger('editable-shown',$(this),editable);
});

that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('hidden').on('hidden',reason) {
var data = that.getData(),row = data[index];

 that.trigger('editable-hidden',reason);
});

});
this.trigger('editable-init');
};

}(jQuery);

这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。

需要引用的文件如下：

rush:xhtml;">

1、文本框

<div class="jb51code">
<pre class="brush:js;">
　　$(function () {
$("#tb_user").bootstrapTable({
toolbar: "#toolbar",editable: {
type: 'text',title: '用户名',validate: function (v) {
if (!v) return '用户名不能为空';

}
}

},index) {
var date = eval('new ' + eval(value).source)
return date.format("yyyy-MM-dd");
}
},{
field: "Hobby",title: "爱好"
}],$el) {
$.ajax({
type: "post",data: row,status) {
if (status == "success") {
alert('提交数据成功');
}
},error: function () {
alert('编辑失败');
},complete: function () {

 }

});

}
});
});

经过测试，用户名这一列基本可以自由编辑。同样，年龄这一列也可改成这样

其他基本不用做任何修改。代码释疑：上文在初始化的columns属性里面通过editable属性来配置可编辑的参数，注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，在列的editable属性里面也可以同样配置，这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。

这是x-editable的默认样式，如果你看着不爽，可以自行配置，x-editable提供了许多配置日期框的参数，如下：

当然，如果精确到时分秒，可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果，看着还不错。

表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式，比如我们的部门这一列的编辑可以写成这样：

当然，这种本地设置数据源的方法肯定是不能满足我们需求的，因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了，比如我们可以这样写：

代码释疑：这里有一点需要说明一下，细心的园友可能发现了，我们这里的 field: "DeptId" ，为什么这里要配置DeptId而不是DeptName呢?很简单，因为我们需要和数据源里面的value值对应。

除了上述几种常见的编辑框，x-editable还为我们提供了复选框组的编辑。比如：

说到上文的复选框，博主不由自主又想到了Multiselect这些个东西，于是查找x-editable的文档，结果发现它不支持Multiselect，但是支持select2，也不知道这是不是一个好消息。根据博主自己的使用经历，也包括技术交流群里面的聊天经历，发现很多人在使用select2的时候都遇到过各种各样的样式问题，并且不太好解决。

既然x-editable支持select2，那我们就用用试试呗，反正官方demo说得挺好的，下面是官方demo的使用示例：