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

Posted 2023-05-09

【中文标题】在 Tablesorter 上动态添加和删除小部件

【英文标题】：Dynamically adding and removing widgets on Tablesorter

【发布时间】：2014-03-06 11:56:03

【问题描述】：

在 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');

【参考方案1】：

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

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

【参考方案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');
    );

);

【讨论】：

没有效果，滚动条还在，我用你的代码更新了我的问题。不知道可能是我用错了

当我测试它时，滚动条消失了一秒钟，然后再次刷新到tablesorter

我删除了这段代码 - $('.tablesorter-blue')[0].config.isScrolling = false;它可以工作，滚动条消失了，但是当我单击按钮再次切换滚动条时，它不再工作了

我会等到一个稳定的滚动器小部件可用于滚动切换，现在我正在使用两个表格排序器，一个带滚动器，另一个不带 - 感谢您的回答

糟糕，我告诉过你将 refreshWidget 参数括在括号中，甚至我没有在上面的代码中这样做 LOL...现在更新了。