Question

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

问题是，如果我启用scroller_fixedColumns: <size>，则选中所有复选框（在<th>中）不起作用[第4列]。以及如何使所有选择所有复选框在多列[第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，列冻结，多列中有多个复选框

1 个答案: