bootstraptable以及⾏内编辑x-editable组件的使⽤
⼀、x-editable组件介绍
1、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组件还有很多其他的功能参数，有兴趣可以看看⽂档，官⽅⽂档对每个参数都有详细的说明。
⼆、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>
后台⽅法
public JsonResult GetUsers()
{
var lstRes = new List<User>();
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"), DeptId = "2", 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这个⽂件
/**
* @author zhixin wen <wenzhixin2010@gmail>
* extensions: github/vitalets/x-editable
*/
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
editable: true,
onEditableInit: function () {
return false;
},
onEditableSave: function (field, row, oldValue, $el) {
return false;
},
发表评论