jEditable로 편집 할 때 XHTML 마크 업을 무시합니다.

Question

jEditable을 사용하여 세 번째 열에 이메일 주소가 포함 된 표를 편집하고 있습니다. 이 열은 일반 텍스트를 포함하지만 jQuery를 사용하여 mailto: 개의 링크로 변환됩니다. 나는 변경을 사용자가 HTML을 처리 할 필요가 없습니다 대신 바로 볼 수 있도록 jEditable는 일반 텍스트 이러한 <td>의 치료를 위해 강제로 어떻게 <a href="mailto:example@example.net">example@example.net</a>

: jEditable가 활성화 될 때 현재, 사용자는이보고 이 : 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" ]] 
    }); 
}); 

편집 1 : 소스보고에서

, jEditable 화재 'onreset'이벤트는 사용자가 클릭 취소합니다. 위의 코드를 업데이트했습니다. 시도 해봐.

편집 2 : 사용자가 편집을 취소 할 때 이메일 주소가 올바른 형식되도록

코드를 수정. 이를 위해 전자 메일이 포함 된 TD에 'emailAddress'클래스를 추가합니다. 이 클래스는 onreset 메소드에서 검사됩니다.

Answer 2

난 그냥 수정하고 이전 대답 완료 : onReset 조금 까다로운, jEditable 덮어 쓰기 (복원) 우리의 onReset 기능이 종료 한 후 원본 콘텐츠 컨테이너 (여기 TD 요소)와 함께합니다. 따라서 우리는 html/양식을 새로운 값으로 바꾸는 대신이 "백업 값"을 덮어 써야합니다.

또한 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" ]] 
    }); 
});