更新单元格注释时的手动性能问题
Handsontable Performance Issues On Updating Comments to Cells
我有一个功能可以更新一行中每个单元格的评论。此函数被更高级别的函数调用多次,该函数遍历 table 中的每一行并确定要应用的注释。
一切正常。请参阅下面代码的简化版本。
// 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实例的渲染被启动。导致 Web 浏览器变得 blocked/chug/become 非常缓慢且响应缓慢,直到所有渲染完成。
所以我的问题是。有什么方法可以防止 Handsontable 每次对单元格应用新评论时都进行渲染吗?是暂时禁用所有呈现还是以不同方式添加评论?
我能想到的第一个提高函数速度的方法是 not 更改单元格中的注释必要的。 (旧评论值 = 新评论值)。为此,您只需在执行 setCommentAtCell 之前比较两个 String :
if(comment.localeCompare(hot.getPlugin('comments').getCommentAtCell(logicalRow,i)) != 0)
commentsPlugin.setCommentAtCell(logicalRow, i, comment);
我使用了一个小示例来快速测试您可以在此 JSFiddle 中找到的更改。 (为了 'quick testing',我在 copy 时触发每个单元格的更改注释:无论你在 table 中使用 ctrl+C,还是使用上下文菜单中的操作 复制)。
您会看到它第一次会冻结(因为每个单元格都会被修改),但第二次完全没有冻结,因为不需要更改。
实际上我最终自己想出了一个解决方案。如果调用hot.getCellMeta()函数设置单元格的注释。
这实际上绕过了 handsontable 的重新渲染。请参阅下面的更新函数。
// 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();
}
我有一个功能可以更新一行中每个单元格的评论。此函数被更高级别的函数调用多次,该函数遍历 table 中的每一行并确定要应用的注释。
一切正常。请参阅下面代码的简化版本。
// 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实例的渲染被启动。导致 Web 浏览器变得 blocked/chug/become 非常缓慢且响应缓慢,直到所有渲染完成。
所以我的问题是。有什么方法可以防止 Handsontable 每次对单元格应用新评论时都进行渲染吗?是暂时禁用所有呈现还是以不同方式添加评论?
我能想到的第一个提高函数速度的方法是 not 更改单元格中的注释必要的。 (旧评论值 = 新评论值)。为此,您只需在执行 setCommentAtCell 之前比较两个 String :
if(comment.localeCompare(hot.getPlugin('comments').getCommentAtCell(logicalRow,i)) != 0)
commentsPlugin.setCommentAtCell(logicalRow, i, comment);
我使用了一个小示例来快速测试您可以在此 JSFiddle 中找到的更改。 (为了 'quick testing',我在 copy 时触发每个单元格的更改注释:无论你在 table 中使用 ctrl+C,还是使用上下文菜单中的操作 复制)。
您会看到它第一次会冻结(因为每个单元格都会被修改),但第二次完全没有冻结,因为不需要更改。
实际上我最终自己想出了一个解决方案。如果调用hot.getCellMeta()函数设置单元格的注释。
这实际上绕过了 handsontable 的重新渲染。请参阅下面的更新函数。
// 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();
}