【问题标题】:Handsontable Performance Issues On Updating Comments to Cells更新单元格注释时的性能问题
【发布时间】:2018-01-07 21:33:14
【问题描述】:

我有一个函数可以更新一行中每个单元格的评论。此函数由更高级别的函数多次调用,该函数循环遍历表中的每一行并确定要应用的 cmets。

这一切都很好。请参阅下面代码的简化版本。

// Loop through all hot rows and determine comment to apply
var loopThroughHotRows = function (hot) {
   var rows = hot.getSourceData().length;
   for (var i = 0; i < rows; i++) {
       var comment = "some comment determined by another function";
       applyResponseCommentsToRow(hot, comment, i);
   }
}

// Apply comments to a whole row in a passed handsontable
var applyCommentsToRow = function (hot, comment, logicalrow) {
  var cols = hot.countCols();
  var commentsPlugin = hot.getPlugin('comments');
  for (var i = 0; i < cols; i++) {
    // render being issued for each comment set.
    // need to restrict rendering somehow.
    commentsPlugin.setCommentAtCell(logicalrow, i, comment);
  }
}

问题在于每次将评论应用于单元格时。启动整个handsontable 实例的渲染。导致网络浏览器被阻塞/突突/变得非常缓慢和响应,直到所有渲染完成。

所以我的问题是。每次将新评论应用于单元格时,是否有某种方法可以防止 Handsontable 呈现?是通过暂时禁用所有渲染还是以其他方式添加 cmets?

【问题讨论】:

    标签: javascript handsontable


    【解决方案1】:

    我能想到的提高函数速度的第一件事是不要在不需要时更改单元格中的注释。 (旧评论值 = 新评论值)。为此,您只需在执行 setCommentAtCell 之前比较两个 String :

    if(comment.localeCompare(hot.getPlugin('comments').getCommentAtCell(logicalRow,i)) != 0)
        commentsPlugin.setCommentAtCell(logicalRow, i, comment);
    

    我使用了一个小示例来快速测试此更改,您可以在此JSFiddle 中找到该更改。 (为了“快速测试”,我在 copy 时触发每个单元格的更改注释:无论您是在表格中使用 ctrl+C,还是使用操作 copy 在上下文菜单中)。

    您会看到第一次它会冻结(因为每个单元格都会被修改),但第二次根本没有冻结,因为没有必要进行更改。

    【讨论】:

    • 现在,如果每次触发更改,都会更改许多单元格,则此增强功能不会对您的问题产生很大影响。我在文档中的任何地方都找不到加快 setCommentAtCell 函数的方法。所以除非有人发现任何关于此的信息,否则您可能会考虑放弃使用此插件...
    • 我一直在与 handsontable 团队就此进行联络,并且能够提出更好的解决方案,以防止每次将评论分配给单元格时重新呈现热点。诀窍在于我们如何将这些评论信息添加到表格中。与在单元格函数中使用 .setComment 不同。我们可以使用 hot.updateSettings({cell:cellproperties}) 方法。这将表格的重新渲染从单元格^2 减少到仅单元格计数。请参阅小提琴示例jsfiddle.net/JoshAdams/wpczdqn2
    • 团队还有一个计划允许渲染特定单元格的项目。查看他们的回复...“目前,我们无法选择要重新渲染的单元格。当单个单元格更改时,整个表格都会重新渲染。我们将添加一个设置单元格范围的选项。该选项将使我们能够区分我们想要重新渲染的单元格。该项目计划在第三季度开始,应该在 9 月开始。您可以在我们的 Trello 路线图trello.com/c/m9KTygSV/80-refactor-re-write-of-renderers" 中跟踪进度并为这个想法投票
    • 我自己想出了这个。如果您有兴趣,请参阅我发布的答案。
    【解决方案2】:

    实际上,我最终自己想出了一个解决方案。如果通过调用 hot.getCellMeta() 函数设置单元格的注释。

    这实际上绕过了对掌上电脑的重新渲染。请参阅下面的更新功能。

    // Apply comments to a whole row in a passed handsontable
    var applyCommentsToRow = function (hot, comment, logicalrow) {
      var cols = hot.countCols();
      for (var i = 0; i < cols; i++) {
        // New method of writing comment to cell. Does not cause handsontable re-render.
        hot.getCellMeta(logicalrow, i).comment = {'value':responseComments};
      }
      // Call render once after all comments have been assigned to row!
      hot.render();
    }
    

    【讨论】:

    • 那么它有什么用吗? (更改颜色单元格,更改值等...)
    • @Fab 嗯,它似乎适用于 getCellMeta() 函数的任何对象属性部分。请参阅下面的示例小提琴。刚刚通过更改类名来更改单元格颜色对其进行了测试。 jsfiddle.net/JoshAdams/wpczdqn2/8。此函数中似乎没有 value 属性。尽管您可以使用另一种方法来访问存储 value 属性的底层对象,但也许还有另一种方法?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-13
    相关资源
    最近更新 更多