1

我在我的应用程序中使用 picnet tablefilter。

http://www.picnet.com.au/resources/tablefilter/demo.htm

Tablefilter 为每一列生成一个输入。在输入中输入一些字符后，将触发过滤。

想要修复标题，我制作了该标题的副本并将其放置在表格过滤器使用的标题上方position: fixed。

我用 id = "my_filtertable_filter_3" 而不是 id = "filtertable_filter_3" 构建了相同的输入，如下所示：

$( '#fixed_table thead' ).append( '<tr class="filters">' + $( '#container thead .filters' ).html() + '</tr>' );

$( '#fixed_table thead .filters input' ).each( function( index )
{
    $( this ).attr( 'id', 'my_' + $( this ).attr( 'id' ) );
});

所以现在我有一个看起来与演示中 picnet tablefilter 的标题完全一样的标题，它流过原始标题，给人的印象是标题是固定的。

该问题的说明（显然没有 picnet 情况）发布在此处：http: //jsfiddle.net/bJ2K7/21/

我想要达到的目标：

当用户在 id = "my_filtertable_filter_3" 的输入中输入一个字符串时，此函数将向 picnet tablefilter 生成的输入输入相同的值。我还触发了 keyup 事件，（在阅读了几个小时的 picnets 代码之后）似乎正在触发过滤器。

    $( '#fixed_table thead .filters input' ).keyup( function() 
    {
        var input_id  = $( this ).attr( 'id' ).substr( 3 );
        var input_val = $( this ).val() ;
        $( '#filtertable #hidden_thead .filters' ).find( 'input#filtertable_filter_3.filter' ).val( input_val );
        $( '#filtertable #hidden_thead .filters' ).find( 'input#filtertable_filter_3.filter' ).trigger('keyup');
    } );

在尝试像这样捕获此事件时，它似乎正在工作：

$( '#filtertable_filter_3' ).keyup( function()
{
    alert( 'event caught' );
});

我的问题：

这是解决问题的绝对错误方法，还是我只是没有触发正确的事件？

问题：

正如下面评论中所说：警报被触发，但过滤器没有过滤（输入值被填充。）

4

1 回答 1

0

没有找到我应该触发什么事件，但将原始输入附加到固定头，它似乎正在工作。所以我的解决方案是一个巨大的矫枉过正（至少我学到了很多关于事件和事件处理程序的知识）。

如果有人使用 picnet tablefilter 并想要制作一个固定的表头，那么使用我的 jsfiddle 中的 css&html 就足够了。

$( '#okno #filtertable thead .filters' ).appendTo( '#fixed_table thead' );
于 2013-08-20T11:19:03.383 回答