JS元件系列——BootstrapTable 行内編輯解決方案：x-editable一、x-editable元件介紹二、bootstrapTable行内編輯初始方案三、bootstrapTable行内編輯最終方案四、總結

<b>閱讀目錄</b>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label0">一、x-editable元件介紹</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label1">二、bootstrapTable行内編輯初始方案</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2">三、bootstrapTable行内編輯最終方案</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2_0">1、文本框</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2_1">2、時間選擇框</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2_2">3、下拉框</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2_3">4、複選框</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label2_4">5、“陰魂不散”的select2</a>

<a href="http://www.cnblogs.com/landeanfen/p/5821192.html#_label3">四、總結</a>

<b>正文</b>

x-editable元件是一個用于建立可編輯彈出框的插件，它支援三種風格的樣式：bootstrap、Jquery UI、Jquery。大緻效果如下圖：

根據部落客一貫的風格，這裡肯定是選用第一種喽。首先還是給出開源位址吧。

 1、x-editable初體驗。

首先下載下傳基于bootstrap的源碼到本地。引用相關檔案。

 頁面元素

js初始化

效果展示

上面是通過html的data屬性去設定x-editable的參數，當然，我也可以在初始化的時候去設定參數，比如，我僅僅給一個空的a标簽：

檢視效果

再來個稍微複雜一點的

上文隻是給出了一些常用字段，當然x-editable元件還有很多其他的功能參數，有興趣可以看看文檔，官方文檔對每個參數都有詳細的說明。 

說了這麼半天，上面的隻是鋪墊，我們最終是希望在bootstrapTable裡面實作行内編輯。根據上面的規則，我們想要使用x-editable實作行内編輯，表格的單元格裡面必須要有一個a标簽，然後對a标簽做x-editable的初始化。有了這個想法，我們按照這種思路先試試。

引用相關檔案

bootstrapTable的相關初始化

背景方法

 背景測試方法

這樣确實是可以實作想要的效果，貌似也能行内編輯了，可是如果沒個列都需要行内編輯，并且列的個數很多，那麼是不是每個列都得這樣去formmater？并且這種寫法狠顯然很死闆，部落客着實難以接受。于是又找了找例子，發現在bootstrapTable的擴充裡面存在bootstrap-table-editable.js這個js。

好吧，部落客承認，上面還是鋪墊，因為部落客覺得這可能是解決問題的一般思路，是以将這些鋪墊的篇幅可能有點多。首先來看看bootstrap-table-editable.js這個檔案

 bootstrap-table-editable.js

這個js其實是對x-editable做了一個簡單的封裝，增加了列的editable屬性以及編輯儲存後的一些事件。有了這個作為基礎，于是我們行内編輯的代碼變成了這樣。

需要引用的檔案如下：

背景對應的更新方法

經過測試，使用者名這一列基本可以自由編輯。同樣，年齡這一列也可改成這樣

其他基本不用做任何修改。

代碼釋疑：上文在初始化的columns屬性裡面通過editable屬性來配置可編輯的參數，注意這裡每個列的editable屬性對應的Json對象即為x-editable裡面的初始化的Json對象，也就是說我們初始化x-editable的時候可以配置哪些屬性，在列的editable屬性裡面也可以同樣配置，這樣用起來就爽多了吧。編輯後的送出方法統一放到onEditableSave事件裡面統一處理。

有了上面的知識作為基礎，我們來初始化生日這一列：

其他地方不用做任何修改，得到效果：

這是x-editable的預設樣式，如果你看着不爽，可以自行配置，x-editable提供了許多配置日期框的參數，如下：

當然，如果精确到時分秒，可以使用datetime類型的編輯框。如下是官方給出的時間框編輯效果，看着還不錯。

表單編輯裡面還有一個重要的标簽就是select了。上文我們知道x-editable為我們提供了下拉框的編輯模式，比如我們的部門這一列的編輯可以寫成這樣：

得到效果

當然，這種本地設定資料源的方法肯定是不能滿足我們需求的，因為很多情況下拉框裡面的選項是從資料庫遠端得到的。當然x-editable也為我們考慮到了，比如我們可以這樣寫：

背景我們配置一個方法

同樣能達到我們想要的結果。

代碼釋疑：這裡有一點需要說明一下，細心的園友可能發現了，我們這裡的 field: "DeptId" ，為什麼這裡要配置DeptId而不是DeptName呢?很簡單，因為我們需要和資料源裡面的value值對應。

除了上述幾種常見的編輯框，x-editable還為我們提供了複選框組的編輯。比如：

得到效果：

當然，如果遠端資料，也可以使用類似上文的方法去取。

說到上文的複選框，部落客不由自主又想到了Multiselect這些個東西，于是查找x-editable的文檔，結果發現它不支援Multiselect，但是支援select2，也不知道這是不是一個好消息。根據部落客自己的使用經曆，也包括技術交流群裡面的聊天經曆，發現很多人在使用select2的時候都遇到過各種各樣的樣式問題，并且不太好解決。

既然x-editable支援select2，那我們就用用試試呗，反正官方demo說得挺好的，下面是官方demo的使用示例：

懷着忐忑的心情，部落客自己嘗試了一把。

引用select2檔案

代碼嘗試

得到結果：

 結果發現select2的選中值不能正常傳遞到背景。反正部落客試過各種參數，按照官方demo的寫法也試過，均以失敗告終。也不知道官方的demo如何成功的。這個問題先抛出來，如果有使用的園友歡迎指正與解答。後續如果部落客解決了這個問題，也會在此更新。 

還有一個問題就是在編輯完成送出之後，部落客在項目中遇到這樣一個問題：如果送出之後的文本内容過多，表格的thead裡面th的寬度和tbody裡面td的寬度不對其的問題，看着相當惡心。但是在寫demo的時候又沒有遇到這個問題。在此還是将解決方案給出來。

就這麼一句話解決你的困擾！

本篇介紹了下bootstrapTable結合x-editable實作行内編輯的使用。文中很多問題都是根據部落客的使用經曆來說明，如果你打算将它用起來，也可以試試。如果本文能夠幫到你，歡迎推薦！

本文轉自懶得安分部落格園部落格，原文連結：http://www.cnblogs.com/landeanfen/p/5821192.html，如需轉載請自行聯系原作者