使用jEditable編輯時忽略XHTML標記

Question

我正在使用jEditable編輯內聯表，其中第三列包含電子郵件地址。此列包含明文，但它會轉換爲使用jQuery的mailto:鏈接。目前，當jEditable被激活時，用戶會看到：<a href="mailto:example@example.net">example@example.net</a>

我該如何強制jEditable將這些<td>s作爲明文處理，以便用戶進行更改時不必處理HTML，而只是看到這個：example@example.net？

這是jQuery的關注：

$(document).ready(function() { 
    var init; 
    $('table#data tbody td').editable('media/support/save.php', { 
     event: "dblclick", 
     submit: "OK", 
     cancel: "Cancel", 
     tooltip: "Double-click to edit...", 
     "callback": function(sValue,y) { 
      alert('The server has been updated.'); 
      var aPos = init.fnGetPosition(this); 
      init.fnUpdate(sValue, aPos[0], aPos[1]); 
     } 
    }); 

    var init = $("table#data").dataTable({ 
     "sDom": 'lfr<"clear">tip<"clear">T', 
     "bStateSave": true, 
     "fnDrawCallback": function() { 
      $('table#data tbody tr').each(function() { 
       var email = $(this).find('td:last'); 
       $(email).html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>'); 
      }); 
     }, 
     "aaSorting": [[ 0, "asc" ]] 
    }); 
}); 

我道歉的代碼的大塊，但大部分似乎很重要。

Answer 1

我無法設置測試頁，但這裏有一個想法。我看了jEditable的源代碼，它有一個名爲'onedit'的事件。此事件在執行實際編輯之前觸發。訂閱此事件並將單元格的內容更改爲普通文本。在回調函數中，將該值重新格式化爲具有mailto：鏈接。

是這樣的：

$(document).ready(function() { 
    var init; 

    $('table#data tbody td').editable('media/support/save.php', { 
      event: "dblclick", 
      submit: "OK", 

      //I am assuming that 'this' will refer to the 'TD' which user double clicked on. 
      //If not, change the code accordingly. 
      onedit : function(settings, self) { $(this).html($(this).text()); } 

      onreset : function(settings, original) 
         { 
         //We have added 'emailAddress class to our TD in initial setup. 
         //When user cancels editing and the cancelled cell has the 'emailAddress' class, 
         //we format it to have mailto link. 
         if($(this).hasClass('emailAddress')) 
         { 
          $(this).html('<a href="mailto:' + $(this).text() + '">' + $(this).text() + '</a>') 
         } 
         }, 

      cancel: "Cancel", 
      tooltip: "Double-click to edit...", 
      "callback": function(sValue,y) { 
        alert('The server has been updated.'); 

        //TODO: If the edited cell was the email cell, if yes, then format the email with mailto link. 

        var aPos = init.fnGetPosition(this); 
        init.fnUpdate(sValue, aPos[0], aPos[1]); 
      } 
    }); 

    var init = $("table#data").dataTable({ 
     "sDom": 'lfr<"clear">tip<"clear">T', 
      "bStateSave": true, 
      "fnDrawCallback": function() { 
       $('table#data tbody tr').each(function() { 
       var email = $(this).find('td:last'); 
        $(email) 
         .html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>') 
         .addClass('emailAddress'); //Add 'emailAddress' class so that we can idenfiy this cell during onreset of jEditable. 

        }); 
     }, 
     "aaSorting": [[ 0, "asc" ]] 
    }); 
}); 

EDIT 1：

從查看源，jEditable火患 'onreset' 事件如果用戶點擊取消。我已經更新了上面的代碼。嘗試一下。

編輯2：

修改代碼，以便當用戶取消編輯，電子郵件地址是正確格式化。爲了實現這個目標，我們爲包含電子郵件的TD添加'emailAddress'類。這個類在onreset方法中被檢查。

Answer 2

我只是修正，完成了以前的答案： onReset是有點棘手，jEditable覆蓋（恢復）與後我們onReset函數結束原有內容的容器（這裏TD元素）。所以我們應該覆蓋這個「備份值」，而不是用新值替換html/form。

此外，在onReset上下文中沒有$（this）對象，這是第二個技巧。

$(document).ready(function() { 
    var init; 

    $('table#data tbody td').editable('media/support/save.php', { 
      event: "dblclick", 
      submit: "OK", 

      //I am assuming that 'this' will refer to the 'TD' which user double clicked on. 
      //If not, change the code accordingly. 
      onedit : function(settings, self) { $(this).html($(this).text()); } 

      onreset : function(settings, original) 
         { 
         //After onEdit function ends, jEditable saves automatically the current value into a "revert" attribute. This means that we get back the text formatted email after clicking on the Cancel button (and not the html formatted)! 
         //Instead of replacing the current FORM element, we should overwrite this backup value, which is stored in the form's parent element. JEditable restores automatically this value after this onReset function ends. 

         //We have added 'emailAddress class to our TD in initial setup. 
         //When user cancels editing and the cancelled cell has the 'emailAddress' class, 
         //we format it to have mailto link. 
         curr_form = this[0];   //FORM object 
         par = curr_form.parentNode; //TD object 
         if($(par).hasClass('emailAddress')) 
         { 
          par.revert = '<a href="mailto:' + par.revert + '">' + par.revert + '</a>'; 
         } 
         }, 

      cancel: "Cancel", 
      tooltip: "Double-click to edit...", 
      "callback": function(sValue,y) { 
        alert('The server has been updated.'); 

        //If the edited cell was the email cell, then format the email with mailto link. 
        if($(this).hasClass('emailAddress')) 
        { 
         $(this).html('<a href="mailto:' + sValue + '">' + sValue + '</a>'); 
         init.fnAdjustColumnSizing(); 
        } 
      } 
    }); 

    var init = $("table#data").dataTable({ 
     "sDom": 'lfr<"clear">tip<"clear">T', 
      "bStateSave": true, 
      "fnDrawCallback": function() { 
       $('table#data tbody tr').each(function() { 
       var email = $(this).find('td:last'); 
        $(email) 
         .html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>') 
         .addClass('emailAddress'); //Add 'emailAddress' class so that we can idenfiy this cell during onreset of jEditable. 

        }); 
     }, 
     "aaSorting": [[ 0, "asc" ]] 
    }); 
});