Выбираемый плагин JQuery очень медленно - PullRequest
Новая
       7

Выбираемый плагин JQuery очень медленно

6 голосов
/ 06 декабря 2010

медленно при использовании в огромных списках и т. Д. Как сделать это быстро?

Ответы [ 5 ]

15 голосов
/ 15 ноября 2011

jQuery UI selectable принимает все элементы структуры DOM, ограничивая количество элементов теми, которые находятся вверху.Добавить фильтр: 

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

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

10 голосов
/ 06 декабря 2010

Если у вас есть огромный список, вы захотите отключить дорогую autoRefresh опцию , например: 

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

Когда вы хотите (скажем stop) вы можете освежиться, как это: 

$(".mySelector").selectable("refresh");
4 голосов
/ 20 декабря 2011

Я обнаружил, что jquery.selectable очень медленно работает в старых браузерах (например, IE7 и 8), потому что он должен вызывать метод .offset () для каждого элемента. Я использовал его для ячеек таблицы, поэтому смог уменьшить количество вызовов .offset () до одного для каждой строки и одного для каждого столбца (вместо одного вызова для каждой ячейки), создав модифицированную версию плагин с измененной функцией обновления. Это сделало производительность приемлемой для больших таблиц. Массив 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

2 голосов
/ 08 августа 2011

В отличие от других методов jquery ui, селектор применяется даже к вложенным элементам.для выбора только прямых предков используйте: 

jQuery('#content').selectable({
filter: '>*',
});
0 голосов
/ 09 июня 2012

Я знаю, что это на пару лет слишком поздно, но я пытался добиться выбора чувствительности на столе 50х100.

Я обнаружил, что если я создаю выбираемый элемент div в таблице (с помощью filter:'td') до вставки содержимого таблицы, он работает очень быстро.В Firefox он создавался примерно за 1 мс (по сравнению с около 100 при его создании на уже существующем контенте).

...