JS組件系列——BootstrapTable 行內編輯解決方案：x-editable
正文php
前言：以前介紹bootstrapTable組件的時候有提到它的行內編輯功能，只不過爲了展現功能，將此一筆帶過了，罪過罪過！最近項目裏面仍是打算將行內編輯用起來，因而再次研究了下x-editable組件，遇到過一些坑，再此作個採坑記錄吧！想要了解bootstrapTable的園友能夠移步 JS組件系列——表格組件神器：bootstrap table。css
本文原創地址：http://www.cnblogs.com/landeanfen/p/5821192.htmlhtml
1、x-editable組件介紹
x-editable組件是一個用於建立可編輯彈出框的插件，它支持三種風格的樣式：bootstrap、Jquery UI、Jquery。大體效果以下圖：前端
根據博主一向的風格，這裏確定是選用第一種嘍。首先仍是給出開源地址吧。java
x-editable開源地址：https://github.com/vitalets/x-editablejquery
x-editable文檔地址：http://vitalets.github.io/x-editable/docs.htmlgit
x-editable在線Demo：http://vitalets.github.io/x-editable/demo-bs3.htmlgithub
一、x-editable初體驗。web
首先下載基於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/
歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利