1

私は基本的に巨大なテーブルを表示するjQuery可用性カレンダーを書いています。どれくらい巨大ですか？過去2年間、現在の年、および将来の2年間の毎日の34行と1列があります。私はあなたのために計算をします：62,000以上のテーブルセル。

はい、これは少しゆっくりとロードされますが、ロードされると、カレンダーは私たちのニーズに正確に適合します。問題は1つだけです。

ユーザーは、セルのブロックを選択できる必要があります。ユーザーがセルのグループの周りにボックスを描画し、ボックス内のすべてのセルを選択できるように、UI内にすべてを設定しました。痛々しいほど遅いのは、実際にそれらを「選択済み」とマークするプロセスです。これが私が使用するループコードです：

while(r<=thisRow) {
            for(var c=startColumn;c<=thisColumn;c++) {
                if($(".calendar_slot[row="+r+"][column="+c+"]").attr('selectable')=='YES') {
                    if (toggleDirection==0) { $(".calendar_slot[row="+r+"][column="+c+"]").removeClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html(''); }
                    if (toggleDirection==1) { $(".calendar_slot[row="+r+"][column="+c+"]").addClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html($(".calendar_slot[row="+r+"][column="+c+"]").attr('label')); }
                }

            }
            r++;
}

ご覧のとおり、列と行のカスタム属性の値で選択する必要があります。すでにID値を使用している速度を同等に必要とする別のプロセスがあるため、これらをセルのIDに埋め込むことはできません。ID値に行と列の情報が含まれている場合、この他の関数は機能しなくなり、カスタム属性を使用する必要があるため、ここで発生しているのと同じ問題が発生します。

この選択プロセスをスピードアップする方法はありますか？ループ自体は長くはかかりません（jQueryのものをコメントアウトすると、非常に高速に実行されます）。したがって、カスタム属性の値に基づいてこれらのタスクを実行するためのより高速なジョブをjQueryに強制する方法が必要です。

何か案は？

4

2 に答える 2

1

検索の繰り返しを避けるために一時変数を使用します。例：

var $RC = $(".calendar_slot[row="+r+"][column="+c+"]")

また、コンテナ要素で検索を制限することで検索を絞り込むことができれば、より高速になります。

 $("#container_div  .calendar_slot[row="+r+"][column="+c+"]")
于 2013-02-14T17:42:09.567 に答える
1

tldr; 特に、多くの要素と対応する属性を入念に検索する必要があるセレクターでは、各要素を列ごとに選択しようとしないでください。

これは私が最初にそれを解決しようとする方法です：

まず、jQueryを使用して最初のrow = $("#calendar .calendar_slot:first")[0]行を選択します。つまり、適切なものを選択します。次に、を使用してDOMノードを反復処理しますnextSibling。選択した最後の行インデックスに達したら、反復を停止します。行が列を支配するという仮定の下では、このループ操作は比較的高速であることが不可欠です。そのため、単純なDOM操作と「範囲スキャン」をお勧めします。（あるいは、これは、次の兄弟セレクターおよび/または範囲セレクターおよび/またはを使用してjQueryセレクター構文で実行できる場合がありますjQuery.slice。）

上記で繰り返された各行には、次のようなものを使用します。

$(row).children(".calendar_slot[selectable]").each(function () {
  var colNum = +this.column
  if (colNum > x && colNum < y) {
    var col = $(this)
    // do stuff with col here: only wrapped once!
  }
}

セレクターは行ごとに1回だけ実行されることに注意してください。さらに、子要素を確認するだけで済みます。上記の行を繰り返すのとは異なり、ここでは「遅い」jQueryで十分なので、優先する必要があります。

また、jQueryRangeSelectorsを検討してください。どちらがあなたの目標を達成するかを確認するために、両方のアプローチを試してみます。範囲セレクターは、上の行を選択するための私の提案を完全に軽減し、列セレクターに追加して明示的な条件を排除する場合があります。

于 2013-02-14T18:10:14.207 に答える