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的源码到本地。引用相关文件。
<script src="/Scripts/jquery-1.9.1.min.js">
<script src="/Content/bootstrap/js/bootstrap.min.js">
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js">
页面元素
js初始化
效果展示
上面是通过html的data属性去设置x-editable的参数，当然，我也可以在初始化的时候去设置参数，比如，我仅仅给一个空的a标签：
js初始化
支持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的初始化。有了这个想法，我们按照这种思路先试试。
引用相关文件
<script src="/Scripts/jquery-1.9.1.min.js">
<script src="/Content/bootstrap/js/bootstrap.min.js">
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js">
<script src="~/Content/bootstrap-table/bootstrap-table.js">
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js">
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'
});
},});
});
后台测试方法
();
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这个文件：
* 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] = params.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属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。
需要引用的文件如下：
<script src="/Scripts/jquery-1.9.1.min.js">
<script src="/Content/bootstrap/js/bootstrap.min.js">
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js">
<script src="~/Content/bootstrap-table/bootstrap-table.js">
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js">
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js">
