2015-08-14 148 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/,对于那些在复选框行中出现问题的其他任何人都是如此。 –