0

非常に単純な質問があります: 固定された行と列を持つ大きなテーブルを実装するための、私が作成したこの単純化された jsFiddle の例よりも効率的な方法はありますか?それとも、それを強化する jQuery の数行を記述するためのより良い方法はありますか?

他の人に似た質問を投稿したことで誰かが私に飛びつく前に、自分自身を説明させてください. 上記の例と同様の効果を実現するプラグインが複数あることに気付きました。ただし、(私が見つけた) それらのどれも、私が必要とする柔軟性と機能を提供していません。

私の実装でサポートする必要があるいくつかの注意事項を次に示します。

  • 行全体を非表示および再表示する機能が必要です
  • 動的な高さのセルをサポートする必要があります
  • （理想的には）ブラウザのスクロールバーを使用してテーブルをナビゲートする必要があります
  • 大きなテーブルをサポートするには高速である必要があります
  • テーブルはノックアウトjsで動的に生成できる必要があります

私の実装で見られる主な問題は、Chrome と IE で遅れることです。例に示した表ではわかりにくいですが、左の列と上の行が表の残りの部分に「追いつく」のに少し時間がかかります。この問題は、テーブルが大きく、バックグラウンドで他の JavaScript も実行されている場合に顕著になります。

それで、私の警告を考慮して、これを実装するより良い方法はありますか?

4

2 に答える 2

1

これを変更すると、パフォーマンスが向上する場合があります。

var offset = $(this).next().offset();
        $(this).offset(offset);
        $(this).css('left', '0');
        $(this).height($(this).next().height());

これに：

        var $this = $(this)
        var offset = $this.next().offset();
        $this.offset(offset);
        $this.css('left', '0');
        $this.height($this.next().height());

変数を使用すると、同じオブジェクトを何度も繰り返しラップするよりも高速です。

于 2012-07-07T16:19:44.127 に答える
0

この jQuery プラグインは、あなたの要求に最適です: http://www.jtable.org/Demo

于 2012-07-06T12:15:57.213 に答える