带有 Tablescroller 小部件的 Tablesorter JS，多列中带有多个复选框的列冻结

Question

我目前正在处理一个主要处理数据库的项目，我使用 Tablesorter JS 插件 来填充我的 table。我想要实现的是 table 具有 多个固定列 并且 在多个列中有多个复选框 在 可滚动部分。我正在使用 Tablesorter Bootstrap 主题 作为 table 样式。我遵循了这个 JSfiddle Dynamic checkbox sorting 和 Tablesorter Widget Scroller example.

问题是，如果我启用 scroller_fixedColumns: <size>，select 所有复选框（在 <th> 中）都不起作用 [第 4 列]。以及如何使所有 select 所有复选框在多列 [第 4、5、6 列，...] 中工作？

这是我的 DEMO

非常感谢您的帮助！非常感谢。

Answer 1

已在 tablesorter issue #977 - demo

中回答

相关代码如下。确保包含 parser-input-select.js file:

$('table').tablesorter({
    theme: "bootstrap",
    resort: false,
    widthFixed: true,
    headerTemplate: '{content} {icon}',
    widgets: ["uitheme", "filter", "zebra", "scroller"],
    widgetOptions: {
        filter_reset: ".reset",
        filter_cssFilter: "form-control",
        scroller_fixedColumns: 3,
    },
    headers: {
        '.action': { sorter: 'checkbox' }
    },
    initialized: function (table) {
        $(table).closest('.tablesorter-scroller').on('change', 'thead th.action input[type=checkbox]', function () {
            var indx,
                $this = $(this),
                checkboxColumn = parseInt( $this.closest('th,td').attr('data-column'), 10 ),
                isChecked = this.checked;
                $cells = $(table)
                    .children('tbody')
                    .children('tr')
                    .children(':nth-child(' + (checkboxColumn + 1) + ')')
                    .find('input'),
                len = $cells.length;
            for ( indx = 0; indx < len; indx++ ) {
                $cells.eq( indx )[0].checked = isChecked;
            }
            $(table).trigger('update');
        });
    }
});

带有 Tablescroller 小部件的 Tablesorter JS，多列中带有多个复选框的列冻结

Tablesorter JS with Tablescroller Widget, column freeze with multiple checkboxes in multiple columns

javascript

checkbox

jquery

tablesorter