（转）JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
正文css
前言：以前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展现功能，将此一笔带过了，罪过罪过！最近项目里面仍是打算将行内编辑用起来，因而再次研究了下x-editable组件，遇到过一些坑，再此作个采坑记录吧！想要了解bootstrapTable的园友能够移步 JS组件系列——表格组件神器：bootstrap table。html
本文原创地址：http://www.cnblogs.com/landeanfen/p/5821192.htmljava
1、x-editable组件介绍
x-editable组件是一个用于建立可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大体效果以下图：jquery
根据博主一向的风格，这里确定是选用第一种喽。首先仍是给出开源地址吧。git
x-editable开源地址：https://github.com/vitalets/x-editablegithub
x-editable文档地址：http://vitalets.github.io/x-editable/docs.htmlajax
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html数据库
一、x-editable初体验。bootstrap
首先下载基于bootstrap的源码到本地。引用相关文件。
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
页面元素
<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>
js初始化
$(function () {
$('#username').editable();
});
效果展现
上面是经过html的data属性去设置x-editable的参数，固然，我也能够在初始化的时候去设置参数，好比，我仅仅给一个空的a标签：
<a href="#" id="username">用户名</a>
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 '不能为空';
}
}
});
});
查看效果
再来个稍微复杂一点的
<a href="#" id="department">选择部门</a>
$(function () {
$('#department').editable({
type: "select", //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
title: "选择部门", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {
return '不能为空';
}
}
});
});
查看效果
上文只是给出了一些经常使用字段，固然x-editable组件还有不少其余的功能参数，有兴趣能够看看文档，官方文档对每一个参数都有详细的说明。
2、bootstrapTable行内编辑初始方案
说了这么半天，上面的只是铺垫，咱们最终是但愿在bootstrapTable里面实现行内编辑。根据上面的规则，咱们想要使用x-editable实现行内编辑，表格的单元格里面必需要有一个a标签，而后对a标签作x-editable的初始化。有了这个想法，咱们按照这种思路先试试。
引用相关文件
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
bootstrapTable的相关初始化
<script type="text/javascript">
var curRow = {};
$(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: "用户名",
formatter: function (value, row, index) {
return "<a href=\"#\" name=\"UserName\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"用户名\">" + value + "</a>";
}
}, {
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: "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'
});
},
});
});</script>
后台方法
后台测试方法
这样确实是能够实现想要的效果，貌似也能行内编辑了，但是若是没个列都须要行内编辑，而且列的个数不少，那么是否是每一个列都得这样去formmater？而且这种写法狠显然很死板，博主着实难以接受。因而又找了找例子，发如今bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。
3、bootstrapTable行内编辑最终方案
好吧，博主认可，上面仍是铺垫，由于博主以为这多是解决问题的通常思路，因此将这些铺垫的篇幅可能有点多。首先来看看bootstrap-table-editable.js这个文件
bootstrap-table-editable.js
这个js实际上是对x-editable作了一个简单的封装，增长了列的editable属性以及编辑保存后的一些事件。有了这个做为基础，因而咱们行内编辑的代码变成了这样。
须要引用的文件以下：
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
一、文本框
$(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事件里面统一处理。
二、时间选择框
有了上面的知识做为基础，咱们来初始化生日这一列：
{
field: "Birthday",
title: "生日",
formatter: function (value, row, index) {
var date = eval('new ' + eval(value).source)
return date.format("yyyy-MM-dd");
},
editable: {
type: 'date',
title: '生日'
}
}
其余地方不用作任何修改，获得效果：
这是x-editable的默认样式，若是你看着不爽，能够自行配置，x-editable提供了许多配置日期框的参数，以下：
固然，若是精确到时分秒，可使用datetime类型的编辑框。以下是官方给出的时间框编辑效果，看着还不错。
三、下拉框
表单编辑里面还有一个重要的标签就是select了。上文咱们知道x-editable为咱们提供了下拉框的编辑模式，好比咱们的部门这一列的编辑能够写成这样：
{
field: "DeptId",
title: "部门",
editable: {
type: 'select',
title: '部门',
source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
}
}
获得效果
固然，这种本地设置数据源的方法确定是不能知足咱们需求的，由于不少状况下拉框里面的选项是从数据库远程获得的。固然x-editable也为咱们考虑到了，好比咱们能够这样写：
{
field: "DeptId",
title: "部门",
editable: {
type: 'select',
title: '部门',
source: function () {
var result = [];
$.ajax({
url: '/Editable/GetDepartments',
async: false,
type: "get",
data: {},
success: function (data, status) {
$.each(data, function (key, value) {
result.push({ value: value.ID, text: value.Name });
});
}
});
return result;
}
}
}
后台咱们配置一个方法
public JsonResult GetDepartments()
{
var lstRes = new List<Department>();
lstRes.Add(new Department() { ID = "1", Name = "研发部" });
lstRes.Add(new Department() { ID = "2", Name = "销售部" });
lstRes.Add(new Department() { ID = "3", Name = "行政部" });
lstRes.Add(new Department() { ID = "4", Name = "创意部" });
lstRes.Add(new Department() { ID = "5", Name = "事业部" });
return Json(lstRes, JsonRequestBehavior.AllowGet);
}
一样能达到咱们想要的结果。
代码释疑：这里有一点须要说明一下，细心的园友可能发现了，咱们这里的 field: "DeptId" ，为何这里要配置DeptId而不是DeptName呢?很简单，由于咱们须要和数据源里面的value值对应。
四、复选框
除了上述几种常见的编辑框，x-editable还为咱们提供了复选框组的编辑。好比：
{
field: "Hobby",
title: "爱好",
editable: {
type: "checklist",
separator:",",
source: [{ value: 'bsb', text: '篮球' },
{ value: 'ftb', text: '足球' },
{ value: 'wsm', text: '游泳' }],
}
}
获得效果：
固然，若是远程数据，也可使用相似上文的方法去取。
五、“阴魂不散”的select2
说到上文的复选框，博主不禁自主又想到了Multiselect这些个东西，因而查找x-editable的文档，结果发现它不支持Multiselect，可是支持select2，也不知道这是否是一个好消息。根据博主本身的使用经历，也包括技术交流群里面的聊天经历，发现不少人在使用select2的时候都遇到过各类各样的样式问题，而且不太好解决。
既然x-editable支持select2，那咱们就用用试试呗，反正官方demo说得挺好的，下面是官方demo的使用示例：
怀着忐忑的心情，博主本身尝试了一把。
引用select2文件
<link href="~/Content/select2-bootstrap.css" rel="stylesheet" /> <link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" /> <script src="~/Content/select2-master/dist/js/select2.full.min.js"></script>
代码尝试
{
field: "Hobby",
title: "爱好",
editable: {
type: 'select2',
title: '爱好',
name: 'Hobby',
placement: 'top',
success: function (response, newValue) {
debugger;
},
error: function(response, newValue) {
debugger;
},
url: function(params) {
debugger;
},
source: [{ id: 'bsb', text: '篮球' },
{ id: 'ftb', text: '足球' },
{ id: 'wsm', text: '游泳' }],
inputclass: 'input-large',
select2: {
allowClear: true,
multiple: true,
}
}
}
获得结果：
结果发现select2的选中值不能正常传递到后台。反正博主试过各类参数，按照官方demo的写法也试过，均以失败了结。也不知道官方的demo如何成功的。这个问题先抛出来，若是有使用的园友欢迎指正与解答。后续若是博主解决了这个问题，也会在此更新。
4、总结
还有一个问题就是在编辑完成提交以后，博主在项目中遇到这样一个问题：若是提交以后的文本内容过多，表格的thead里面th的宽度和tbody里面td的宽度不对其的问题，看着至关恶心。可是在写demo的时候又没有遇到这个问题。在此仍是将解决方案给出来。
就这么一句话解决你的困扰！
本篇介绍了下bootstrapTable结合x-editable实现行内编辑的使用。文中不少问题都是根据博主的使用经从来说明，若是你打算将它用起来，也能够试试。若是本文可以帮到你，欢迎推荐！
本文原创出处：http://www.cnblogs.com/landeanfen/
欢迎各位转载，可是未经做者本人赞成，转载文章以后必须在文章页面明显位置给出做者和原文链接，不然保留追究法律责任的权利