[jQuery] 用Jeditable快速更新MySQL資料

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官方網頁一遊。有任何的問題指教，也歡迎與我討論。

可能的相關文章：

• [jQuery] .ajax 在 IE7 中無法執行 success 函式
• [jQuery] Lazy與Lazy Load
• 解析jQuery Selectors的效能
• [jQuery] 可連結的區塊元素

這篇文章發表於 May 11th, 2008 ，分類為：Webdev，並且加上了以下的標籤：ajax, edit in place, jQuery, mysql, plugins。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。