Question

在jquery加载开始时 - 仅使用zebra小部件初始化tablesorter：

$('.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日

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

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

//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”方法。

<Window x:Class="Contacts_App.View.ContactsWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Contacts_App.View"
        xmlns:vm="clr-namespace:Contacts_App.ViewModel"
        mc:Ignorable="d"
        Title="Contacts Window" Height="320" Width="400">

    <Window.Resources>
        <vm:ContactsViewModel x:Key="vm"/>
    </Window.Resources>

    <StackPanel Margin="10">
        <Button 
            Content="New Contact"
            Command="{Binding NewContactCommand}"/>
        <TextBox Margin="0,5,0,5"/>
        <ListView
            Height="200"
            Margin="0,5,0,0"
            ItemsSource="{Binding Contacts}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Name}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>

</Window>

Answer 2

I＆＃39; M悲伤地说，卷轴插件需要大量的工作，和错误修正;这包括在刷新小部件时将其从表中删除。

我回答了一个类似的问题，描述了如何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;

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

$('.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上动态添加和删除小部件

2 个答案: