1

jQuery の hide() および show() を使用した選択に基づいて、テーブル内の tr を一般的に切り替える方法を理解しています。これは、数百行で非常に効果的に機能していました。今、DOM の 5000 以上のエントリで動作する必要があります。そして、ブラウザが完全にフリーズします。

私の検索では、こちらの learningjquery.com にたどり着きました。

その中で説明されている「スタイルシートの有効化/無効化」方法があり、魅力のように機能するはずです。そして、それはIE9でのみ魅力のように機能し、行をフィルタリングするのに1秒しかかからないことを除いてそうです。Chrome では、同じアクションに 15 ～ 20 秒以上かかります。

私の問題は、このアプリケーションが構築されている人々によって Chrome がかなり広く使用されていることです。このソリューションを Chrome で機能させる方法を誰かに提案してもらえますか、またはこのシナリオを処理する他の方法を提案してもらえますか。

  1. .css('display', 'none')、.addClass() および .removeClass() などの他のオプションを試しました。何も高速化していないようです。
  2. 私はデータテーブルを試しましたが、その後は非常に高速ですが、最初にこの量のデータをロードするのに永遠にかかります.

更新: @jfriend00 と @Ohgodwhy に感謝します。これが、すべてのブラウザーで機能する最終的なコードです。

$('#tbl_product_details tbody tr').each( function() {
    var row = $(this);
    row.hasClass("tr_"+cust_id) ? row.removeClass("hide") : row.addClass("hide");
});

ただし、受け入れられた回答が示すように、プレーンな js とページの読み込み時に dom 要素を取得することでさらに改善できますが、それを行う必要はありませんでした。コードはすでに十分に高速であり、jQuery コードをあちこちに配置したいと考えています。

4

1 に答える 1

0

tr_+custom_idあなたのコメントに基づいて、クラスを持つ行のみを表示し、他のすべての行を非表示にしたいようです。

ここでのパフォーマンスの鍵は、操作ごとにすべての行を 1 回だけ反復処理することです。現在、各操作で少なくとも 2 回実行しています。また、ページの読み込み時に 1 回反復し、JavaScript でインデックスを構築することで、DOM を反復するよりもはるかに高速に検索できるため、高速化することもできます。

最初の単純化として、この 2 つのパス スキームを置き換えることができます。

$('#tbl_product_details tbody tr:not(.special_hide)').addClass('special_hide');
$('#tbl_product_details tbody tr.tr_'+cust_id+'').removeClass('special_hide');

このワンパススキームで：

var custRow = "tr_"+cust_id;
$('#tbl_product_details tbody tr').each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

行自体が変更されない場合は、ページの読み込み後に、行のリストを永続変数に 1 回だけプリロードできます。

var rowList = $('#tbl_product_details tbody tr');

そして、この JS を使用します。

var custRow = "tr_"+cust_id;
rowList.each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

jQuery を削除し、汎用性の低い単純な JavaScript コードに置き換えることで、さらに高速化できます。

どの行が現在表示されているか、どの行が特定の ID であるかのインデックスを javascript に保持することでさらに高速化できるため、すべての行とすべてのクラス名を調べることなく、操作する必要がある行を直接操作できます。このようにすると、非常に迅速に作成できる可能性があります。

于 2012-10-30T06:17:16.497 に答える