Question

我使用jEditable编辑内联表，其中第三列包含电子邮件地址。此列包含明文，但使用jQuery将其转换为mailto:链接。目前，当激活jEditable时，用户会看到：<a href="mailto:example@example.net">example@example.net</a>

如何强制jEditable将这些<td>视为纯文本，以便进行更改的用户无需处理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" ]]
    });
});

使用jEditable进行编辑时忽略XHTML标记

2 个答案: