7

在巨大的列表等上使用时它很慢。如何让它变快？

4

6 回答 6

16

jQuery UI selectable 采用 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

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

于 2011-12-19T21:41:47.440 回答
2

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

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

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

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

于 2012-06-09T00:13:00.607 回答
0

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

于 2021-12-22T12:25:34.310 回答