1

アプリケーションで picnet tablefilter を使用しています。

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

Tablefilter は、各列の入力を生成します。入力にいくつかの文字を入力した後、フィルタリングがトリガーされます。

ヘッダーを修正したいので、そのヘッダーのコピーを作成して配置し、tablefilter with で使用されるヘッダーのすぐ上に浮かぶようにしましたposition: fixed

次のように、id = "filtertable_filter_3" の代わりに id = "my_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 によって生成された入力に同じ値を入力します。また、(picnets コードを数時間読んだ後) フィルターをトリガーしているように見える keyup イベントもトリガーします。

    $( '#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