Handsontable - 过度的单元格渲染减慢了应用程序答案

【问题标题】：Handsontable - excessive cell rendering slowing down applicationHandsontable - 过度的单元格渲染减慢了应用程序
【发布时间】：2016-08-30 06:06:05
【问题描述】：

我创建了一个 Handsontable，它通过 Rails 显示来自数据库的数据。目前，表中有 99 行。最左侧的“已选择”列显示一个伪复选框（使用自定义单元格渲染器），指示用户是否已选择该行。数据模式还包括“选定”属性。当用户选择一列或多列时，相应行的“已选择”属性在数据对象中切换，这会导致更改的单元格重新呈现以反映更改。

问题在于，对于任何可编辑列所做的任何更改，每个可见的“选定”单元格都会重新呈现。为了演示，在附加的 jsFiddle 中，最左边的“选定”列和最右边的“Prom”列都是可编辑的。表格上方的计数器显示调用“选定”单元格渲染器的次数（为简单起见，“选定”列中显示 X，而不是复选框）。您可以看到，只需单击第 1 行“选定”单元格就会导致 selectColRenderer 被调用 21 次。单击同一单元格并向下拖动到第 5 行（保留在“选定”列中）会导致单元格渲染器被调用 105 次。在任何“Prom”列单元格中输入文本也会生成对单元格渲染器的 21 次调用。

在我的应用程序中，我有一个“全选”按钮，可以选择数据模型中的所有 99 个对象。如果其中 28 行可见，则 selectColRenderer 被调用 99*28 次 --> 几乎 2800 次调用单元格渲染器。更改需要三到四秒钟才能反映在浏览器中。

这是（简化的）单元格渲染器函数：

var selectColRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  // the following 2 lines are only part of the fiddle
  renderCount++;
  $("#render_count").val(renderCount);
  if (instance.getSourceDataAtRow(cellProperties.row).selected == true) {
     $(td).html("X");
  } else {
    $(td).html("");
  }
};

这是更新数据模型的函数：

afterSelectionEnd: function(r1, c1, r2, c2) {
  hot = $("#list_table").handsontable("getInstance");
  if (c1 === 0 && c2 === 0) {
     for (r = r1; r <= r2; r++) {
       objRow = hot.getCellMeta(r, 0).row;
       var selected = (hot.getSourceDataAtRow(objRow).selected)
       hot.setDataAtRowProp(r, "selected", !selected);
     }
  }
},

有没有办法防止这种行为？如果我有一个数百行的表，性能将无法接受。这是 Handsontable 的工作原理，还是我做错了什么？

小提琴：https://jsfiddle.net/jplato/u9japmqg/

【问题讨论】：

标签： jquery jquery-plugins handsontable

【解决方案1】：

经过大量实验，我解决了这个问题。似乎更新多列的最佳方法是使用 setDataAtCell() 并传递要对每个单元格进行的更改的 2D 数组，而不是使用 setDataAtRowProp() 并单独传递更改。

【讨论】：