7

巨大なリストなどで使用すると遅いです。どうすれば速くなりますか?

4

6 に答える 6

16

jQuery UI の選択可能要素は、DOM 構造のすべての要素を取得し、要素の数を最上位にある要素に制限します。フィルターを追加します。

$("#items").selectable({filter: 'li'});

http://forum.jquery.com/topic/major-performance-problems-with-selectable

于 2011-11-15T14:57:20.300 に答える
11

巨大なリストがある場合は、次のように高価なautoRefreshオプションを無効にする必要があります。

$(".mySelector").selectable({ autoRefresh: false });

必要に応じて ( on と言うstop)、次のようにリフレッシュできます。

$(".mySelector").selectable("refresh");
于 2010-12-06T10:24:26.003 に答える
4

古いブラウザー (IE7 や 8 など) では jquery.selectable が非常に遅いことがわかりました。これは、アイテムごとに .offset() メソッドを呼び出す必要があるためです。私はテーブルのセルでそれを使用していたので、.offset() 呼び出しの数を行ごとに 1 回、列ごとに 1 回に減らすことができました (セルごとに 1 回の呼び出しではなく)。更新機能を変更したプラグイン。これにより、大規模なテーブルのパフォーマンスが許容可能になりました。cellPositions 配列は、各列の水平位置を保持します。

      this.refresh = function() {
            var cellPositions = [];
            var firstRow = true;
            selecteeRows = $("tr", self.element[0]);
            selecteeRows.each(function() {
                var row = $(this);
                // adding any filters here seems to slow down IE a lot
                // self.options.filter is not used!!
                var selecteeCells = $(row).find("td"); 
                if (firstRow && selecteeCells.length > 0) {
                    for (var i = 0; i < selecteeCells.length; i++) {
                        cellPositions[i] = $(selecteeCells[i]).offset().left;
                    }
                    cellPositions[selecteeCells.length] = cellPositions[selecteeCells.length - 1] + $(selecteeCells).outerWidth(true);
                    firstRow = false;
                }
                if (selecteeCells.length > 0) {
                    var top = $(selecteeCells).first().offset().top;
                    var bottom = top + $(selecteeCells).first().outerHeight();
                    var i = 0;
                    selecteeCells.each(function() {
                        var $this = $(this);
                        first = false;
                        $.data(this, "selectable-item", {
                            element: this,
                            $element: $this,
                            left: cellPositions[i],
                            top: top,
                            right: cellPositions[i + 1],
                            bottom: bottom,
                            startselected: false,
                            selected: $this.hasClass('ui-selected'),
                            selecting: $this.hasClass('ui-selecting'),
                            unselecting: $this.hasClass('ui-unselecting')
                        });
                        i++;
                    });
                }
            });

        };

編集: github のコードへのリンクは次のとおりです: https://github.com/dfjackson/jquery.ui.selectableTable

于 2011-12-19T21:41:47.440 に答える
2

他の jquery ui メソッドとは異なり、selector はネストされた要素にも適用されます。直接の祖先のみを選択するには、次を使用します。

jQuery('#content').selectable({
filter: '>*',
});
于 2011-08-08T18:20:03.193 に答える
0

これは数年遅すぎることは承知していますが、50x100 テーブルで選択可能な感じをきびきびとしようとしてきました。

filter:'td'テーブルのコンテンツを挿入する前に、テーブルのコンテナー div (with) で選択可能なものを作成すると、超高速で実行されることがわかりました。Firefox では、約 1 ミリ秒でインスタンス化されていました (既存のコンテンツで作成した場合の約 100 ミリ秒と比較して)。

于 2012-06-09T00:13:00.607 に答える