Duck Punching/Monkey Patching breaks Tablesorter

Question

У меня есть текстовое поле, в которое введены значения, разделенные запятой/разделителями, в которые я должен убедиться, что у вас есть уникальные записи. Решено, что используя Paul Irish's Duck Punching example #2 и привязывая его к onblur для этого текстового поля.

Значения, введенные в текстовое поле, разбиваются на стол. Поскольку таблица может быть очень длинной, я нашел Mottie's Tablesorter, чтобы работать блестяще.

Проблема в том, что Duck Punching code разрушает 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 box выше не будет работать должным образом. В этом случае «утиная пробивка» даже не нужна.

Вот как я бы исправить сценарий (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> 

Script (требует 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); 

Я пытался добавить несколько замечаний к уточнить, что делает каждый шаг. Пожалуйста, не стесняйтесь просить о каких-либо разъяснениях.