2015-08-14 100 views
2

我想實現過濾我的複選框檢查狀態類似於(或完全一樣?)Ivan時,他張貼「使用tablesorter自定義分析器只用於過濾」。我在文檔中提供的示例中反覆使用了自定義分析器和文本提取以及每個置換,但無濟於事。 有人可以看看我的例子張貼在 http://jsfiddle.net/5fLr7c4o/14/ 並幫助我得到它的工作? 我使用的是在和其他的例子提供的頭文件和textExtraction功能:使用tablesorter自定義分析器只用於篩選與複選框 - 工作示例需要

  headers: { 
      0: { 
       sorter: 'false', 
       filter: 'parsed' 
      } 
     }, 
     textExtraction: { 
      0: function (node, table, cellIndex) { 
       return $(node).find('.MyCheckbox').prop('checked') ? 'True' : 'False'; 
      } 
     } 

熬下來,我有兩個按鈕。其中一個會在沒有選中複選框的情況下過濾所有內容,另一個復位過濾器。重置工作正常。過濾器(在我的本地文件中)過濾所有內容。 jsfiddle根本不起作用。

回答

0

jsFiddle無法正常工作,因爲在插件之後加載了jQuery。該框架被設置爲加載jQuery v1.11.0,所以jQuery實際上被加載了兩次。第二個副本覆蓋第一個副本,而tablesorter與第一個副本相關聯。很多東西打破 - 這裏是demo updated刪除第二個副本 - 但它仍然不工作

如果使用存儲庫中包含的parser-input-select.js file,則它具有複選框解析器,可在更改後更新單元格,以便正確更新排序。無論如何,有四個版本的代碼,較舊的版本不使用提到的解析器。您可能會感興趣的演示是這一個:http://jsfiddle.net/abkNM/6163/你可能不需要尋呼機,所以纔不包括代碼:

$(function() { 
    var $table = $('table').tablesorter({ 
     theme: 'blue', 
     widgets: ['zebra', 'filter'], 
     widgetOptions : { 
      group_checkbox: [ "checked", "unchecked" ] 
     }, 
     headers: { 
      0: { sorter: 'checkbox' } 
     } 
    }) 
    // HEADER CELL Checkbox - toggles state of visible checkboxes 
    // make sure to include the "parser-input-select.js" file 
    // it contains the most up-to-date checkbox parser 
    .on('change', 'thead input[type="checkbox"]', function(){ 
     var checkboxColumn = 0, 
      onlyVisible = true, 

      $this = $(this), 
      isChecked = this.checked; 
     $table 
      .children('tbody') 
      .children('tr' + (onlyVisible ? ':visible' : '')) 
      .children(':nth-child(' + (checkboxColumn + 1) + ')') 
      .find('input') 
      .prop('checked', isChecked) 
      .trigger('update'); 
    }); 
}); 

確保根據需要修改checkboxColumn & onlyVisible變量。


更新:有在剛固定分析器代碼中的錯誤,這是目前在主分支只(在我的答案鏈接)提供。否則,您只需輸入uncheckedchecked"(用一個精確匹配的報價進行檢查)來​​過濾複選框。

這些過濾器名稱(複選框狀態)由group_checkbox option設置,我剛添加到我的答案中。

+0

非常感謝! parser-input-select.js是我所缺少的。我剛剛得到它的工作。更新的示例位於http://jsfiddle.net/RobRichens/5fLr7c4o/22/,對於那些在複選框行中出現問題的其他任何人都是如此。 –