Jeditable是一個用來達成「就地編輯」(Edit In Place)目的的jQuery plugin,以下簡單介紹這個外掛的用法,以及如何將編輯完成的內容更新到MySQL資料表中。
在本文的範例中,要更新的是如下的資料表:

通常我們會把資料表的資料拉到網頁裡,如下圖,前兩個欄位即是要利用Jeditable來編輯的資料。第一欄(對應資料表category欄)要使用文字框(text input)來編輯,第二欄(對應資料表parent欄)則是用下拉選單(select)編輯。

將要更新的資料以div包住,並加上class和id屬性。請注意id值的數字是用php動態產生的,即是資料表的cId欄位值:
<div class="category" id="category_13">日文</div>
<div class="parent" id="parent_1">語文類</div>
使用這個外掛的語法如下:
$(document).ready(function() {
$(".category").editable("save.php", {
cancel: '取消',
submit: '修改',
indicator: "儲存中...",
tooltip: '滑鼠點此可編輯...',
width: "70px"
});
$(".parent").editable("save.php", {
loadurl : "parents.php",
type: "select",
cancel: '取消',
submit : "修改",
indicator: "儲存中...",
});
});
在這幾個參數裡面,第一個參數「save.php」即是將更新內容存入資料庫的後端處理程序,其他的參數應該不難理解;比較值得介紹的是「loadurl」這個參數,如果我們希望動態產生下拉選單的內容,就必須使用loadurl來加入外部資料。這個部份請參閱Jeditable官方網頁的「How to use selects?」一節。
完成上述步驟後,就地編輯就會開始作用了。點擊可編輯的文字時,Jeditable會自動產生一張表單,在本例中會依照「type」參數的設定,出現文字框或下拉選單:


按下「修改」送出表單時,Jeditable預設後端(save.php)會接收到兩個POST變數:$_POST['id']和$_POST['value'](變數名稱也是預設的,可以使用id和name兩個參數修改)。$_POST['id']的值等於前述放在div裡的id值,$_POST['value']則是在表單欄位內輸入的值。
後端(save.php)更新資料表的程式碼如下(參考來源:DeviLib.com):
< ?php
$id = $_POST['id'];
$value = $_POST['value'];
//將$_POST['id']用explode函式拆解為$field和$id兩個變數
list($field, $id) = explode('_', $id);
//mysql query
mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");
//將值傳回前端
echo $value;
?>
完成後的成品網頁請按此測試。有個缺憾是,這個外掛無法直接搭配jQuery Validation一起使用,必須另行客製(有善心人士可以提供嗎?),所以我是用php在後端做資料驗證的。想了解更多資訊,請務必到Jeditable官方網頁一遊。有任何的問題指教,也歡迎與我討論。