2007年5月28日

jEditable 使用技巧

先前曾在 網頁上的就地編輯 (Edit in place) 功能 中抱怨過這些 plugins 完全忽視 Server 資料更新失敗的可能性而不能還原成修改前的資料。

自己寫一個新的,單純使用 select 更動資料的 plugin 是一個方法,不過最後還是測出了當 Server 端資料更新失敗後如何還原原始資料的方法。

經由檢視 jEditable.js 內的源碼後得知 jEditable 將被編輯元素的原始內容保存在該元素的 revert 屬性中,配合 jEditable - In Place Editor Plugin for jQuery - Edit In Place 提到的 Submitting to function instead of URL 作法可以得知可指定一個函式處理 Server 端資料更新與狀態驗證:

  1. 將欲送往 Server 端之資訊以 JSON 格式加以封裝,封裝時必須額外封裝兩份資料:元素的原始內容 (revert) 及實際要傳回的內容 (rtnValue,預設值等於函式所接收到的 value 值)。
  2. 以 $.getJSON() 或其他 ajax 函式呼叫將欲更新的資料送往 Server 端並使用 callback function 處理 Server 端回覆的執行結果。此處的重點是先前封裝起來的 JSON 物件可以在 callback function 中使用,這表示可以將某些資訊傳入 callback function 中,也可以在 callback function 中設定回傳變數 (rtnValue) 的內容。
  3. 將最後欲顯示的資料內容傳回 jQuery 。
範例如下:
$(".editable").editable(

function(value, settings) {

var myParam = new Object(); // 要傳給 Server 用的欄位 myParam.key = this.id.replace( /key/i, "" ); myParam.param = value; // 回呼函式使用的欄位 myParam.revert = this.revert; // 元素原始內容 myParam.rtnValue = value; // 使用者修改過之內容 $.getJSON( "json/updateData", // Server 上更新資料之位址 myParam, // 傳入之參數 function( json ) { // 回呼函式/callback function if( !json.status ) { // 假如更新失敗就傳回原始內容 myParam.rtnValue = myParam.revert; } } ); return( myParam.rtnValue ); // 傳回動作結束後要顯示的內容 }, { loadurl : "json/loadPMData", type : "select", indicator : "<img src='images/indicator.gif'>", submit : "OK", tooltip: "滑鼠雙擊此欄位後即可編輯", event : "dblclick" } );