加快基于属性修改表单元格范围(行/列选择）的速度

Speed up modifying range of table cells (row/column selection) based on attributes

本文关键字：速度 范围 列选 选择 单元格 修改 于属性 属性 表单      更新时间：2023-09-26

我正在编写一个jQuery Availability Calendar，它基本上显示了一个巨大的表。有多大？过去两年、今年和未来两年的每一天都有三十四行和一列。我帮你算一下：62000多个表格单元格。

是的，加载速度有点慢，但一旦加载，日历就完全符合我们的需求。只有一个问题：

用户需要能够选择一个单元格块。我在UI中设置了所有内容，允许用户在一组单元格周围绘制一个框，选择框中的所有单元格。真正将它们标记为"选定"的过程非常缓慢。这是我使用的循环代码：

while(r<=thisRow) {
            for(var c=startColumn;c<=thisColumn;c++) {
                if($(".calendar_slot[row="+r+"][column="+c+"]").attr('selectable')=='YES') {
                    if (toggleDirection==0) { $(".calendar_slot[row="+r+"][column="+c+"]").removeClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html(''); }
                    if (toggleDirection==1) { $(".calendar_slot[row="+r+"][column="+c+"]").addClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html($(".calendar_slot[row="+r+"][column="+c+"]").attr('label')); }
                }
            }
            r++;
}

正如您所看到的，我必须根据列和行自定义属性的值进行选择。我不能将这些嵌入到单元格的ID中，因为还有另一个进程已经在使用ID值，对速度有同样的需求。如果ID值包含行和列信息，那么这个其他函数就会中断，然后它将需要使用自定义属性，因此会遇到与我在这里遇到的问题相同的问题。

有没有办法加快这个选择过程？循环本身并不需要很长时间（如果我注释掉jQuery的内容，它会运行得非常快）。因此，我需要一种方法来强制jQuery根据自定义属性的值更快地执行这些任务。

有什么想法吗？

tldr；不要尝试逐行逐列选择每个元素，尤其是使用必须费力搜索许多元素和相应属性的选择器。

这就是我最初尝试解决它的方式：

首先，使用jQuery选择第一行，即row = $("#calendar .calendar_slot:first")[0]或任何合适的行。然后，使用nextSibling迭代DOM节点。达到最后一个选定的行索引时停止迭代。在假设行主导列的情况下，这个循环操作必须相对快速，这就是为什么我建议使用简单的DOM操作和"范围扫描"。（或者，在jQuery选择器语法中，使用下一个同级选择器和/或范围选择器和/或者jQuery.slice，这可能是可行的。）

对于上面迭代的每一行，使用类似于以下内容的内容：

$(row).children(".calendar_slot[selectable]").each(function () {
  var colNum = +this.column
  if (colNum > x && colNum < y) {
    var col = $(this)
    // do stuff with col here: only wrapped once!
  }
}

请注意，选择器每行只执行一次；此外，它只需要查看子元素。与迭代上面的行不同，"较慢"的jQuery在这里就足够了，因此应该是首选。

另外，考虑jQuery范围选择器；我会尝试这两种方法，看看哪一种能达到你的目标。在这种情况下，范围选择器可能会完全减轻我选择上面行的建议，它们可能会很好地添加到列选择器中，并消除显式条件。

使用临时变量来避免重复搜索，例如：

var $RC = $(".calendar_slot[row="+r+"][column="+c+"]")

此外，如果你可以通过使用容器元素来限制搜索范围，它会更快：

 $("#container_div  .calendar_slot[row="+r+"][column="+c+"]")
相关文章：