2011-07-28 10 views
6

私は現在、jQueryのhide/show関数を使用して、選択ボックスからグループにテーブルをフィルタリングしています。hide/show are * very * slow

実際のコードは正常に動作しますが、非常に遅く、実行に1〜2分かかることがあります。

私は、コードので、代わりに非表示()とshow()それはcss({'display':'none'});使用し、css({'display':'block'});切り替え - は速度差が、それは今わずか数秒を単純に信じられないほど要しているが、Firefoxでテーブルデータは、すべての行ごとに押しつぶされると。

これは私たちがほとんどInternet Explorerを使用して以来の世界の終わりではありませんが、かなりの人(自分自身を含む)がFirefoxを使用しているので、周りに道があるかどうかは疑問です。

答えて

4

テーブル行を表示/非表示にするFirefoxでは、次のように設定する必要があります。

//To show 
$("tr").css("display", "table-row"); 

//To hide 
$("tr").css("display", "none"); 
+0

これは、IEの場合と同様に、trはブロック要素ではなく 'table-row'の表示タイプにする必要があります。 – scrappedcola

+1

実際には、jquery show/hideを使用する方が良いこれらの条件。 – ShankarSangoli

+0

多くのおかげで、これは実際には完璧です!以前はFirebugを使っていましたが、私が試した(そしてもちろんうまくいかなかった)テーブルセルの値がありましたが、これは完璧です!残念ながら、私は本当に表示/非表示を使用することはできません - それは処理するために永遠にかかりますhttp://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance –

1

jQuery APIでは、.showおよび.hide関数の期間を設定できます。私はあなたがこれを設定するとあなたの問題を解決するかもしれないと思う。

the docs for .show()を参照してください。

the docs for .hide()を参照してください。

+0

多くのおかげで、前に(0)に設定していたので、問題のアニメーションではなかった。それを殺した - http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance –

+0

@xn dx速度を0に設定すると、jQueryがアニメーションを使用して値を変更することになりますが、それは遅くなります、ちょうどそれを空白のままにします。また、表示/非表示のCSSを変更することはありませんが、適切な可視性に復元できるように、以前の値をキャッシュします。 – Andrew

+0

ああ!私は0に速度を設定することはまだアニメーション、多くのありがとうとトリガーを知ったことはありません:) –

1

show()とhide()の継続時間については、答えが良いです。ただし、行が多すぎる場合は、show()display: blockまたはdisplay: table-rowの違いは、show()は各行に対してアニメーションを実行することです。これは間違いなく大きなテーブルでは特に遅くなる可能性があります。

実際にパフォーマンスを圧迫しようとしている場合は、jqGridまたはSlickGridのソースコードを調べてみてください。後者のフィルタリング機能は非常に高速で、確実に機能します。それがあまりにもあなたのために関与している場合は、ちょうどdisplay: blockまたはdisplay: table-rowdisplay: noneに行ってください。 showFastとhideFastを行う独自のjQueryプラグインを作成して、そのコードを繰り返す必要はありません。

+0

これは素晴らしいアドバイスです、ありがとうございます!ちょうど今SlickGridを見て、本当に良い:) –