这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。
需要引用的文件如下：
<link href="https://www.jb51.net/Content/bootstrap/css/bootstrap.min.css" /> <link href="https://www.jb51.net/~/Content/bootstrap3-editable/css/bootstrap-editable.css" /> <link href="https://www.jb51.net/Content/bootstrap-table/bootstrap-table.min.css" /> <script src="https://www.jb51.net/Scripts/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="https://www.jb51.net/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
1、文本框
$(function () { $("#tb_user").bootstrapTable({ toolbar: "#toolbar", idField: "Id", pagination: true, showRefresh: true, search: true, clickToSelect: true, queryParams: function (param) { return {}; }, url: "/Editable/GetUsers", columns: [{ checkbox: true }, { field: "UserName", title: "用户名", editable: { type: 'text', title: '用户名', validate: function (v) { if (!v) return '用户名不能为空'; } } }, { field: "Age", title: "年龄", }, { field: "Birthday", title: "生日", formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy-MM-dd"); } }, { field: "DeptName", title: "部门" }, { field: "Hobby", title: "爱好" }], onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/Editable/Edit", data: row, dataType: 'JSON', success: function (data, status) { if (status == "success") { alert('提交数据成功'); } }, error: function () { alert('编辑失败'); }, complete: function () { } }); } }); });
后台对应的更新方法
public JsonResult Edit(User user) { //更新实体 return Json(new { }, JsonRequestBehavior.AllowGet); }
经过测试，用户名这一列基本可以自由编辑。同样，年龄这一列也可改成这样
{ field: "Age", title: "年龄", editable: { type: 'text', title: '年龄', validate: function (v) { if (isNaN(v)) return '年龄必须是数字'; var age = parseInt(v); if (age <= 0) return '年龄必须是正整数'; } } }
其他基本不用做任何修改。
代码释疑：上文在初始化的columns属性里面通过editable属性来配置可编辑的参数，注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，在列的editable属性里面也可以同样配置，这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。
2、时间选择框
有了上面的知识作为基础，我们来初始化生日这一列：