在 Tablesorter 上动态添加和删除小部件

Question

在 jquery 加载开始时 - 仅使用 zebra 小部件初始化表排序器：

$('.tablesorter-blue').tablesorter({
   widthFixed : true,           
   usNumberFormat : false,
   sortReset      : true,
   sortRestart    : true,
   widgets        : ['zebra']
}); 

通过单击按钮，我动态添加了一个“滚动”小部件：

$('.tablesorter-blue').trigger('applyWidgets', true);
$('.tablesorter-blue')[0].config.widgets = ['scroller'];

这没问题，因为它添加了滚动小部件，并且还保留了以前的小部件（斑马）。

我目前遇到的问题是再次从 tablesorter 中删除滚动小部件，只保留 zebra 小部件。我已经尝试过这些代码，但失败了：

来自文档 - refreshwidget - http://mottie.github.io/tablesorter/docs/#refreshwidgets:

//remove all widgets
$('.tablesorter-blue').trigger('refreshWidgets', true, true);
$('.tablesorter-blue')[0].config.widgets = [];

//re-add widget (zebra)
$('.tablesorter-blue').trigger('applyWidgets', true);
$('.tablesorter-blue')[0].config.widgets = ['zebra'];

这是报告的错误：

TypeError: $(...)[0].config is undefined

更新： @mottie 给出的添加的代码 - 滚动条仍然在那里没有影响

        $('.tablesorter-blue').closest('.tablesorter-scroller').find('.tablesorter-scroller-header').remove();
        $('.tablesorter-blue')
            .unwrap()
            .find('.tablesorter-filter-row').removeClass('hideme').end()
            .find('thead').show().css('visibility', 'visible');
        $('.tablesorter-blue')[0].config.isScrolling = false;

更新日期：2014 年 2 月 10 日

感谢 mottie 对 widget-scroller.js 的更新，问题现已解决。我已经用新版本更新了我的代码。

如演示中所示，这是我添加和删除滚动小部件的代码：

//initialize tablesorter
//THE TRICK IS TO PUT IN A VARIABLE LOL, SO THAT IT CAN BE UPDATED LATER :D
//THANKS AGAIN MOTTIE
var $tblSorter = $('.tablesorter-blue').tablesorter({               
    widgets: ['zebra'] //no SCROLLER
});

//Code for adding scroller
$tblSorter.trigger('refreshWidgets', [true, true]); //REMOVE ALL WIDGETS
$tblSorter[0].config.widgets = ['zebra', 'scroller']; //ADD ZEBRA & SCROLLER
$tblSorter.trigger('applyWidgets');

//Code for removing scroller
$tblSorter.trigger('refreshWidgets', [true, true]); //REMOVE ALL WIDGETS
$tblSorter[0].config.widgets = ['zebra']; //REMOVE THE SCROLLER, RETAIN ZEBRA ONLY
$tblSorter.trigger('applyWidgets');

Answer 1

对于以后遇到这个问题的其他人，从 v2.25 开始，TableSorter 中内置了一个“removeWidget”方法。

$('.tablesorter').trigger('removeWidget', ['scroller'])

Answer 2

很遗憾，滚动小部件需要大量工作和错误修复；这包括在刷新小部件时将其从表格中删除。

我回答了一个类似的问题，描述了如何remove the scroller here。这是您需要的相关代码：

// remove scroller widget completely
$table.closest('.tablesorter-scroller').find('.tablesorter-scroller-header').remove();
$table
    .unwrap()
    .find('.tablesorter-filter-row').removeClass('hideme').end()
    .find('thead').show().css('visibility', 'visible');
$table[0].config.isScrolling = false;

---

更新：哦，我注意到在上面的代码中，传递给“refreshWidgets”的参数没有用括号括起来。它应该是这样的：

$('.tablesorter-blue').trigger('refreshWidgets', [true, true]);

here is a demo，带有删除小部件代码的略微修改版本：

$(function () {
    $('#table1').tablesorter();

    var $table2 = $('#table2').tablesorter({
        widgets : ['scroller']
    });

    $('button').click(function(){
        var widgets = $table2[0].config.widgets;
        $table2.trigger('refreshWidgets', [true, true]);
        $table2[0].config.widgets = $.inArray('scroller', widgets) >= 0 ?
            [] : ['scroller'];
        $table2.trigger('applyWidgets');
    });

});