start > 2007-05-28 > 2

jEditable 使用技巧

Created by Ada. Last edited by Ada, one year and 227 days ago. Viewed 437 times. #2

[diff] [history] [edit] [rdf]

labels

Parent:

JQuery

attachments

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 端資料更新與狀態驗證：

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