且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用tablesorter自定义解析器仅用于使用复选框过滤-需要工作示例

更新时间:2023-02-16 18:06:52

jsFiddle无法正常工作,因为在插件之后加载了jQuery。而且该框架已设置为加载jQuery v1.11.0,因此jQuery实际上已加载了两次。第二个副本覆盖第一个副本,并且表排序器与第一个副本相关联。很多东西中断了-这是演示已更新以删除第二个副本-但是仍然不起作用

The jsFiddle isn't working because jQuery is being loaded after the plugin. And the framework is set to load jQuery v1.11.0, so jQuery is actually being loaded twice. The second copy overrides the first and the tablesorter is associated to the first copy. Lots of stuff break - here is the demo updated to remove the second copy - but it still doesn't work!

如果您使用 parser-input-select.js 文件包含在存储库中,有一个复选框解析器,它可以在更改后更新单元格,因此排序可以正确更新。无论如何,有四个版本的代码,较旧的版本则不使用上述解析器。您可能对此感兴趣的演示是这样的: http://jsfiddle.net/abkNM/6163/您可能不需要寻呼机,因此只需不要包含该代码:

If you use the parser-input-select.js file included in the repository, it has a checkbox parser that updates the cell after changing so the sort updates properly. Anyway, there are four versions of the code, the older ones don't use the mentioned parser. The demo you might be interested in is this one: http://jsfiddle.net/abkNM/6163/ You probably don't need the pager, so just don't include that code:

$(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 所需的变量。

Make sure to modify the checkboxColumn & onlyVisible variables as desired.

更新:发生错误在刚刚修复的解析器代码中,当前仅在master分支中可用(在我的答案中链接)。否则,您可以输入未选中选中的 (带引号的精确匹配)来过滤复选框。

Update: There was an error in the parser code that was just fixed, it is currently available in the master branch only (linked in my answer). Otherwise you could just enter unchecked or checked" (checked with a quote for an exact match) to filter the checkboxes.

这些过滤器名称(复选框状态)由 group_checkbox 选项,我刚刚将其添加到答案中。

These filter names (checkbox states) are set by the group_checkbox option, which I just added to my answer.