JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable

更新時(shí)間：2016年09月01日 10:58:27 作者：懶得安分

這篇文章主要介紹了JS組件系列BootstrapTable行內(nèi)編輯解決方案：x-editable，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言：之前介紹bootstrapTable組件的時(shí)候有提到它的行內(nèi)編輯功能，只不過(guò)為了展示功能，將此一筆帶過(guò)了，罪過(guò)罪過(guò)！最近項(xiàng)目里面還是打算將行內(nèi)編輯用起來(lái)，于是再次研究了下x-editable組件，遇到過(guò)一些坑，再此做個(gè)采坑記錄吧！想要了解bootstrapTable的朋友可以移步JS組件系列——表格組件神器：bootstrap table。

一、x-editable組件介紹

x-editable組件是一個(gè)用于創(chuàng)建可編輯彈出框的插件，它支持三種風(fēng)格的樣式：bootstrap、Jquery UI、Jquery。大致效果如下圖：

根據(jù)博主一貫的風(fēng)格，這里肯定是選用第一種嘍。首先還是給出開(kāi)源地址吧。
x-editable開(kāi)源地址：https://github.com/vitalets/x-editable
x-editable文檔地址：http://vitalets.github.io/x-editable/docs.html
x-editable在線Demo：http://vitalets.github.io/x-editable/demo-bs3.html

1、x-editable初體驗(yàn)

首先下載基于bootstrap的源碼到本地。引用相關(guān)文件。

<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>

頁(yè)面元素

復(fù)制代碼代碼如下:

js初始化

 $(function () {
 $('#username').editable();
 });

效果展示

上面是通過(guò)html的data屬性去設(shè)置x-editable的參數(shù)，當(dāng)然，我也可以在初始化的時(shí)候去設(shè)置參數(shù)，比如，我僅僅給一個(gè)空的a標(biāo)簽：<a href="#" id="username">用戶名</a>

js初始化

 $(function () {
 $('#username').editable({
 type: "text", //編輯框的類型。支持text|textarea|select|date|checklist等
 title: "用戶名", //編輯框的標(biāo)題
 disabled: false, //是否禁用編輯
 emptytext: "空文本", //空值的默認(rèn)文本
 mode: "inline", //編輯框的模式：支持popup和inline兩種模式，默認(rèn)是popup
 validate: function (value) { //字段驗(yàn)證
 if (!$.trim(value)) {
 return '不能為空';
 }
 }
 });

 });

查看效果

再來(lái)個(gè)稍微復(fù)雜一點(diǎn)的
<a href="#" id="department">選擇部門</a>

 $(function () {
 $('#department').editable({
 type: "select", //編輯框的類型。支持text|textarea|select|date|checklist等
 source: [{ value: 1, text: "開(kāi)發(fā)部" }, { value: 2, text: "銷售部" }, {value:3,text:"行政部"}],
 title: "選擇部門", //編輯框的標(biāo)題
 disabled: false, //是否禁用編輯
 emptytext: "空文本", //空值的默認(rèn)文本
 mode: "popup", //編輯框的模式：支持popup和inline兩種模式，默認(rèn)是popup
 validate: function (value) { //字段驗(yàn)證
 if (!$.trim(value)) {
 return '不能為空';
 }
 }
 });

 });

查看效果

上文只是給出了一些常用字段，當(dāng)然x-editable組件還有很多其他的功能參數(shù)，有興趣可以看看文檔，官方文檔對(duì)每個(gè)參數(shù)都有詳細(xì)的說(shuō)明。

二、bootstrapTable行內(nèi)編輯初始方案

說(shuō)了這么半天，上面的只是鋪墊，我們最終是希望在bootstrapTable里面實(shí)現(xiàn)行內(nèi)編輯。根據(jù)上面的規(guī)則，我們想要使用x-editable實(shí)現(xiàn)行內(nèi)編輯，表格的單元格里面必須要有一個(gè)a標(biāo)簽，然后對(duì)a標(biāo)簽做x-editable的初始化。有了這個(gè)想法，我們按照這種思路先試試。

引用相關(guān)文件

<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的相關(guān)初始化

<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: "愛(ài)好"
 }],
 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>

后臺(tái)方法

后臺(tái)測(cè)試方法

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 = "研發(fā)部" });
 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 = "風(fēng)衣大叔", 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 = "創(chuàng)意部" });
 lstRes.Add(new User() { Id = "5", UserName = "韓梅梅", Age = 29, Birthday = Convert.ToDateTime("1987-05-01"), DeptId = "5", DeptName = "事業(yè)部" });

 return Json(lstRes, JsonRequestBehavior.AllowGet);
 }

 public JsonResult Edit(User user)
 {
 //反序列化之后更新

 return Json(new { }, JsonRequestBehavior.AllowGet);
 }

這樣確實(shí)是可以實(shí)現(xiàn)想要的效果，貌似也能行內(nèi)編輯了，可是如果沒(méi)個(gè)列都需要行內(nèi)編輯，并且列的個(gè)數(shù)很多，那么是不是每個(gè)列都得這樣去formmater？并且這種寫(xiě)法狠顯然很死板，博主著實(shí)難以接受。于是又找了找例子，發(fā)現(xiàn)在bootstrapTable的擴(kuò)展里面存在bootstrap-table-editable.js這個(gè)js。

三、bootstrapTable行內(nèi)編輯最終方案

好吧，博主承認(rèn)，上面還是鋪墊，因?yàn)椴┲饔X(jué)得這可能是解決問(wèn)題的一般思路，所以將這些鋪墊的篇幅可能有點(diǎn)多。首先來(lái)看看bootstrap-table-editable.js這個(gè)文件：

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * extensions: https://github.com/vitalets/x-editable
 */

!function ($) {

 'use strict';

 $.extend($.fn.bootstrapTable.defaults, {
 editable: true,
 onEditableInit: function () {
 return false;
 },
 onEditableSave: function (field, row, oldValue, $el) {
 return false;
 },
 onEditableShown: function (field, row, $el, editable) {
 return false;
 },
 onEditableHidden: function (field, row, $el, 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, row, index) {
 var result = _formatter ? _formatter(value, row, 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, Array.prototype.slice.apply(arguments));

 if (!this.options.editable) {
 return;
 }

 $.each(this.columns, function (i, 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, row, oldValue, $(this));
 });
 that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
 .off('shown').on('shown', function (e, editable) {
 var data = that.getData(),
 index = $(this).parents('tr[data-index]').data('index'),
 row = data[index];
 
 that.trigger('editable-shown', column.field, row, $(this), editable);
 });
 that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
 .off('hidden').on('hidden', function (e, reason) {
 var data = that.getData(),
 index = $(this).parents('tr[data-index]').data('index'),
 row = data[index];
 
 that.trigger('editable-hidden', column.field, row, $(this), reason);
 });
 });
 this.trigger('editable-init');
 };

}(jQuery);

這個(gè)js其實(shí)是對(duì)x-editable做了一個(gè)簡(jiǎn)單的封裝，增加了列的editable屬性以及編輯保存后的一些事件。有了這個(gè)作為基礎(chǔ)，于是我們行內(nèi)編輯的代碼變成了這樣。

需要引用的文件如下：

<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>

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: "愛(ài)好" 
 }],
 onEditableSave: function (field, row, oldValue, $el) {
 $.ajax({
 type: "post",
 url: "/Editable/Edit",
 data: row,
 dataType: 'JSON',
 success: function (data, status) {
 if (status == "success") {
 alert('提交數(shù)據(jù)成功');
 }
 },
 error: function () {
 alert('編輯失敗');
 },
 complete: function () {

 }

 });
 }
 });
 });

后臺(tái)對(duì)應(yīng)的更新方法

 public JsonResult Edit(User user)
 {
 //更新實(shí)體

 return Json(new { }, JsonRequestBehavior.AllowGet);
 }

經(jīng)過(guò)測(cè)試，用戶名這一列基本可以自由編輯。同樣，年齡這一列也可改成這樣

　　　　　　 {
 field: "Age",
 title: "年齡",
 editable: {
 type: 'text',
 title: '年齡',
 validate: function (v) {
 if (isNaN(v)) return '年齡必須是數(shù)字';
 var age = parseInt(v);
 if (age <= 0) return '年齡必須是正整數(shù)';
 }
 }
 }

其他基本不用做任何修改。
代碼釋疑：上文在初始化的columns屬性里面通過(guò)editable屬性來(lái)配置可編輯的參數(shù)，注意這里每個(gè)列的editable屬性對(duì)應(yīng)的Json對(duì)象即為x-editable里面的初始化的Json對(duì)象，也就是說(shuō)我們初始化x-editable的時(shí)候可以配置哪些屬性，在列的editable屬性里面也可以同樣配置，這樣用起來(lái)就爽多了吧。編輯后的提交方法統(tǒng)一放到onEditableSave事件里面統(tǒng)一處理。

2、時(shí)間選擇框

有了上面的知識(shí)作為基礎(chǔ)，我們來(lái)初始化生日這一列：

 {
 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的默認(rèn)樣式，如果你看著不爽，可以自行配置，x-editable提供了許多配置日期框的參數(shù)，如下：

當(dāng)然，如果精確到時(shí)分秒，可以使用datetime類型的編輯框。如下是官方給出的時(shí)間框編輯效果，看著還不錯(cuò)。

3、下拉框

表單編輯里面還有一個(gè)重要的標(biāo)簽就是select了。上文我們知道x-editable為我們提供了下拉框的編輯模式，比如我們的部門這一列的編輯可以寫(xiě)成這樣：

　　　　　　 {
 field: "DeptId",
 title: "部門",
 editable: {
 type: 'select',
 title: '部門',
 source:[{value:"1",text:"研發(fā)部"},{value:"2",text:"銷售部"},{value:"3",text:"行政部"}]
 }
 }

得到效果

當(dāng)然，這種本地設(shè)置數(shù)據(jù)源的方法肯定是不能滿足我們需求的，因?yàn)楹芏嗲闆r下拉框里面的選項(xiàng)是從數(shù)據(jù)庫(kù)遠(yuǎn)程得到的。當(dāng)然x-editable也為我們考慮到了，比如我們可以這樣寫(xiě)：

{
 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;
 }
 }
 }

后臺(tái)我們配置一個(gè)方法

 public JsonResult GetDepartments()
 {
 var lstRes = new List<Department>();
 lstRes.Add(new Department() { ID = "1", Name = "研發(fā)部" });
 lstRes.Add(new Department() { ID = "2", Name = "銷售部" });
 lstRes.Add(new Department() { ID = "3", Name = "行政部" });
 lstRes.Add(new Department() { ID = "4", Name = "創(chuàng)意部" });
 lstRes.Add(new Department() { ID = "5", Name = "事業(yè)部" });
 return Json(lstRes, JsonRequestBehavior.AllowGet);
 }

同樣能達(dá)到我們想要的結(jié)果。

代碼釋疑：這里有一點(diǎn)需要說(shuō)明一下，細(xì)心的園友可能發(fā)現(xiàn)了，我們這里的 field: "DeptId" ，為什么這里要配置DeptId而不是DeptName呢?很簡(jiǎn)單，因?yàn)槲覀冃枰蛿?shù)據(jù)源里面的value值對(duì)應(yīng)。

4、復(fù)選框

除了上述幾種常見(jiàn)的編輯框，x-editable還為我們提供了復(fù)選框組的編輯。比如：

{
 field: "Hobby",
 title: "愛(ài)好",
 editable: {
 type: "checklist",
 separator:",",
 source: [{ value: 'bsb', text: '籃球' },
 { value: 'ftb', text: '足球' },
 { value: 'wsm', text: '游泳' }],
 }
 }

得到效果：

當(dāng)然，如果遠(yuǎn)程數(shù)據(jù)，也可以使用類似上文的方法去取。

5、“陰魂不散”的select2

說(shuō)到上文的復(fù)選框，博主不由自主又想到了Multiselect這些個(gè)東西，于是查找x-editable的文檔，結(jié)果發(fā)現(xiàn)它不支持Multiselect，但是支持select2，也不知道這是不是一個(gè)好消息。根據(jù)博主自己的使用經(jīng)歷，也包括技術(shù)交流群里面的聊天經(jīng)歷，發(fā)現(xiàn)很多人在使用select2的時(shí)候都遇到過(guò)各種各樣的樣式問(wèn)題，并且不太好解決。

既然x-editable支持select2，那我們就用用試試唄，反正官方demo說(shuō)得挺好的，下面是官方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: "愛(ài)好",
 editable: {
 type: 'select2',
 title: '愛(ài)好',
 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,
 } 
 }
 }

得到結(jié)果：

結(jié)果發(fā)現(xiàn)select2的選中值不能正常傳遞到后臺(tái)。反正博主試過(guò)各種參數(shù)，按照官方demo的寫(xiě)法也試過(guò)，均以失敗告終。也不知道官方的demo如何成功的。這個(gè)問(wèn)題先拋出來(lái)，如果有使用的園友歡迎指正與解答。后續(xù)如果博主解決了這個(gè)問(wèn)題，也會(huì)在此更新。

四、總結(jié)

還有一個(gè)問(wèn)題就是在編輯完成提交之后，博主在項(xiàng)目中遇到這樣一個(gè)問(wèn)題：如果提交之后的文本內(nèi)容過(guò)多，表格的thead里面th的寬度和tbody里面td的寬度不對(duì)其的問(wèn)題，看著相當(dāng)惡心。但是在寫(xiě)demo的時(shí)候又沒(méi)有遇到這個(gè)問(wèn)題。在此還是將解決方案給出來(lái)。