使用 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:link。

类似：

$(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：

修改了代码，以便当用户取消编辑时，电子邮件地址的格式正确。为此，我们将“emailAddress”类添加到包含电子邮件的 TD。此类在 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" ]]
    });
});