在設計CMS之類的系統時，常常會需要一個表單和一個瀏覽資料的頁面，以新型新增、修改和查詢的工作，不過畫面排版通常會非常類似，只差在表單有額外的表單控制項，而瀏覽頁面就是單純的文字而已，但當需要更新排版時，就需要兩個頁面都同時修改，非常不方便；這時候透過X-editable，就能夠在瀏覽的頁面同時編輯資料囉。

開始使用X-editable

X-editable有bootstrap和jQueryUI的版本，以及不使用任何UI Framework，我們可以挑選喜歡的版本來使用，記得也要載入相依的js/css。

接下來我們加入一個包含了X-editable需要的data-* api的link

<a href="#" id="username" data-type="text" data-pk="1" data-title="請輸入文字"
  data-url="https://jsonplaceholder.typicode.com/posts"></a>

接著加入一段JavaScript

$('#username').editable();

就完成啦！這裡我們的link內是沒有文字的，因此會出現紅色的 Empty 文字，滑鼠點下去就會發現出現一個輸入文字的textbox，輸入文字後再按下旁邊的藍色按鈕，就會幫我們把資料送到後端去囉。

至於後端在哪裡，又是怎麼送的呢？就在link裡面的data-* api啦！接下來我們就介紹一下需要設定的部分：

• data-type：可以選擇X-ditable內建的表單元件，例如我們範例中的data-type="text"就是使用一般的textbox，更多可用的元件請參考 https://vitalets.github.io/x-editable/docs.html#inputs 。
• data-pk：拜表資料來源的key值，這個資料會送到後端，我們可以在後端檢查pk的值來決定要更新哪一筆資料。
• data-url：要post的後端網址，範例中的網址是一個假的API服務，讓我們可以有一個虛擬的後端來接資料，但實際上不會有任何作用；因此記得改成自己的後端網址。
• data-title：跳出編輯資料畫面時的標題文字。
• data-value：實際上的內容，也可以直接寫在 tag裡面。
• id或name：代表資料的欄位名稱，也會跟著被送到後端去。

以我們一開始的範例來說，就會將以下資料送到後端去

name=username&value=aa&pk=1

如果我們不指定data-pk，那麼在編輯完成後就不會主動送到後端，我們可以透過這個小技巧，來同時達到新增的目的！

不使用data-* api

如果不喜歡使用data-* api，我們也可以用JavaScript的方式來指定相關參數，實際上X-editable裡面大多數的元件也還是需要使用JavaScript設定參數的方式來處理，例如一個select(dropdown)，我們可以先給一個單純的HTML

<a href="#" id="sex"></a>

接著透過JavaScript設定類型及選項

$('#sex').editable({
  type: 'select',
  value: 'M',
  source: [
    {value: 'M', text: 'Male'},
    {value: 'F', text: 'Female'}
  ]
});

全域參數設定

我們可以透過$.fn.editable.defaults.xxx = ooo的方式，來設定一些全域的參數，例如預設編輯是會跳出一個小視窗的模式(popup)，我們希望改為inline的模式，可以加入以下程式：

$.fn.editable.defaults.mode = 'inline';

或者是沒有資料時預設顯示為Empty我們也可以修改成別的文字

$.fn.editable.defaults.emptytext = '點我加入資料';

更多參數設定可以參考： https://vitalets.github.io/x-editable/docs.html#editable

自訂新的輸入元件

X-editable已經內件數種常見的編輯元件，如果想要自訂更複雜的元件，可以參考GitHub上的abstract.js內容，X-editable的元件皆衍生自這個檔案，檔案內也有詳細的註解；如果需要sample code，則可以參考address.js。

不過官方的文件也有解釋X-editable主要是用來處理單一的欄位修改，如果需要到客製化程度高的元件，直接藏一個<div>表單，在文字按下去時顯示反而直覺易懂，不一定需要X-editable，至於到底該用什麼方式，就自行依情境而定囉！

今天的DEMO: https://jsfiddle.net/wellwind/kkk526mk/

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/25/front-end-x-editable

不正經閒聊

在Xmas日子介紹X-editable，有比較應景嗎XDD