jquery 的可选插件非常慢

Question

当在巨大的列表上使用时它会很慢，等等。如何使它更快？

Answer 1

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

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

http://forum.jquery.com/topic/major -可选择的性能问题

Answer 2

如果您有一个巨大列表，您将需要禁用昂贵的autoRefresh 选项，如下所示：

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

当您需要时（例如停止），您可以刷新自己，如下所示：

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

Answer 3

我发现 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

Answer 4

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

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

Answer 5

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

我发现，如果我在插入表格内容之前在表格的容器 div 上创建可选择项（使用 filter:'td'），它的运行速度会非常快。在 Firefox 中，它的实例化时间约为 1 毫秒（相比之下，在预先存在的内容上创建它时需要大约 100 毫秒）。

Answer 6

对于一个非常大的列表也有同样的问题，最终处理悬停事件并为每一行调用 .selectable() 。这为我解决了这个问题。