Question

在大型名单上使用时速度很慢等等。如何快速使用？

Answer 1

jQuery UI selectable采用DOM结构的所有元素，将元素数量限制在顶部的元素数量。添加过滤器：

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

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

Answer 2

如果你有一个巨大的列表，你会想要禁用这样昂贵的autoRefresh option：

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

如果你想要（比如stop），你可以刷新自己，就像这样：

$(".mySelector").selectable("refresh");

Answer 3

我发现旧版浏览器（如IE7和8）中的jquery.selectable非常慢，因为它必须在每个项目上调用.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

Answer 4

与其他jquery ui方法不同，选择器甚至应用于嵌套元素。选择只使用直接祖先：

jQuery('#content').selectable({
filter: '>*',
});

Answer 5

我知道这已经太晚了几年，但我一直试图在50x100的桌子上获得可选择的感觉。

我发现如果我在插入表内容之前在表的容器div（使用filter:'td'）上创建了selectable，它会超快地运行。在firefox中，它在大约1ms内实例化（相比之下，在预先存在的内容上创建它时大约为100）。

jquery可选插件非常慢

5 个答案: