Question

我有一个文本框，输入逗号分隔/分隔值，我必须确保它具有唯一条目。解决了使用Paul Irish's Duck Punching example #2并将其绑定到该文本框的onblur。

输入文本框的值会分成表格。由于表格可能非常冗长，我发现Mottie's Tablesorter能够很好地工作。

问题是，Duck Punching代码打破了Tablesorter。 Tablesorter的样式传递得很好，但表实际上并没有排序。但是，当我评论Duck Punching代码时，Tablesorter奇迹般地起作用。

我的编码技巧并不能让我弄清楚为什么这两者是冲突的。非常感谢任何帮助。

我没有修改Tablesorter代码或添加任何特殊的排序元素......只是按照现在的基本示例。这是Duck Punching代码，我只修改了包含我需要有唯一条目的文本框的var。

 function ValidateTextBox1()
{    
(function($){
var arr = document.getElementById("TextBox1").value.split(',');
    var _old = $.unique;

    $.unique = function(arr){

        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

 }

上面的函数位于一个单独的js文件中，该文件通过onblur为TextBox1调用。

然后，我有一个按钮，它运行以下内容：

function GenerateTable()
{  

var Entry1 = document.getElementById("TextBox1").value
var Entry2 = document.getElementById("TextBox2").value
var content = "<table id=myTable class=tablesorter ><thead><tr><th>Entry 1 Values</th><th>Entry 2 Value</th></tr></thead><tbody>"
var lines = Entry1.split(","),
i;
for (i = 0; i < lines.length; i++)
    content += "<tr><td>" + (Entry1.split(",")[i]) + "</td><td>" + Entry2 + "</td></tr>";
    content += "</tbody></table>"


$("#here_table").append(content);
$(function(){
  $("#myTable").tablesorter({
      theme: 'default'
 });
});

}

该函数将在特定DIV中生成/附加表。

如果我留下TextBox1的验证码，该表将生成但不可排序（尽管它确实设法仍然拉动主题）。

如果删除验证码，表格将生成并可排序。

Answer 1

上面的validateText框函数将无法按预期工作。在这种情况下，甚至不需要“打鸭”。

以下是我将如何修复脚本（demo）：

HTML

<textarea id="textbox1">6,1,7,5,3,4,3,2,4</textarea><br>
<textarea id="textbox2">column 2</textarea><br>
<button>Build Table</button>
<div id="here_table"></div>

脚本（需要jQuery 1.7 +）

(function($) {

    // bind to button
    $(function () {
        $('button').on('click', function () {
            // disable button to prevent multiple updates
            $(this).prop('disabled', true);
            generateTable();
        });
    });

    function unique(arr) {
        return $.grep(arr, function (v, k) {
            return $.inArray(v, arr) === k;
        });
    }

    function generateTable() {
        var i,
            $wrap = $('#here_table'),
            // get text box value, remove unwanted
            // spaces/tabs/carriage returns & create an array
            val = $('#textbox1').val().split(/\s*,\s*/),
            // get unique values for Entry1
            entry1 = unique( val ),
            entry2 = $('#textbox2').val(),
            content = "";
        // build tbody rows
        for (i = 0; i < entry1.length; i++) {
            content += "<tr><td>" + (entry1[i] || '?') + "</td><td>" + entry2 + "</td></tr>";
        }
        // update or create table
        if ($wrap.find('table').length) {
            // table exists, just update the data
            $wrap.find('tbody').remove();
            $wrap.find('table')
                .append(content)
                .trigger('update');
        } else {
            // table doesn't exist, build it from scratch
            $wrap
                .html('<table id=myTable class=tablesorter><thead><tr>' +
                    '<th>Entry 1 Values</th>' +
                    '<th>Entry 2 Value</th>' +
                    '</tr></thead><tbody>' + content + '</tbody></table>')
                .find('table')
                .tablesorter({
                    theme: 'blue'
                });
        }
        // enable the button to allow updating the table
        $('button').prop('disabled', false);
    }

})(jQuery);

我尝试添加一些注释，以便更清楚地说明每个步骤的作用。请随时要求澄清。

Duck Punching / Monkey Patching打破了Tablesorter

1 个答案: