更新 Handsontable 中的特定单元格

Question

是否可以强制只更新一个 td（单元格）以供查看？有一种方法 hot.render()，但它会重新渲染所有单元格。

我想使用 ajax 更新 table 内容 JSON 数据 (hot.getData())，但我找不到如何强制渲染 table.我的 table 太大了，每次收到数据时都需要重新渲染。

例如，

$.ajax(url,... ,success: function(d){
var data = hot.getData();
data[parseInt(d['row'],10)][d['col']] = d['value'];
hot.render();//please, change this function into more simple.
},
...
);

是否可以在 [row,col] 更新 TD-cell？

Answer 1

重新渲染整个 table 是 Handsontable 允许您进行渲染的唯一方式，这样做有几个很好的理由。首先，您的 table 有多大并不重要，因为正在使用虚拟渲染。这意味着它只会呈现您可以看到的内容以及更多行。即使您有数万亿行和列，它仍然会渲染到足以让您认为它已完全渲染的程度。假设您没有使用自定义渲染器做一些时髦的事情，这不是一项艰巨的任务。

它从头开始呈现所有内容的另一个原因是它是 Handsontable 保持无状态 DOM 对象的方式。如果您开始手动渲染特定的单元格，那么您最终可能会看到不同步的外观 table。而且，同样，由于虚拟渲染限制了渲染的内容，因此不存在与完全重新渲染相关的性能问题。

Answer 2

我同意完整的网格渲染很好，但是有一个 drawback.When 我们渲染完整的网格它会滚动回第 1 行，它不会存储我们之前的最后一个视图 render.E。G。我在第 100 行，一旦我渲染网格将返回到第 1 行，现在用户必须再次滚动回第 100 行，这令人沮丧。

这个问题的任何解决方案。

我发现我们可以使用 hot.selectCell(100,1) 回到第 10 行，但是我如何以编程方式存储我们在第 100 行中，以便我可以将它设置回那一行。

我使用以下代码做了一个 customRendering 来更改 Grid 的值，但是当我们有大量行要更改时它会出现一些性能问题。

//Below code will render one row ,similarly apply the loop to modify multiple row.

data.Records[i].Values.forEach(function(value, ix) {
hot.setDataAtCell(i, ix, value);
//i is row number , ix is the column number , v is the new value.
}

但是 hot.setDataAtCell(i, ix, v) 是一个昂贵的，所以如果你有大量的行那么它会达到 performance.However 好处是它会做自定义（single/mulitiple) cell/row 在不滚动网格和保留用户视图的情况下呈现。

P.S。代替 hot.setDataAtCell 您可以使用 setDataAtRowProp 来设置一行的值，但是我还没有尝试过。

Answer 3

您可以使用setDataAtCell()方法更新一个或多个单元格。

setDataAtCell(row, column, value, source)

Set new value to a cell. To change many cells at once (recommended way), pass an array of changes in format [[row, col, value], ...] as the first argument.

Source: https://handsontable.com/docs/7.2.2/Core.html#setDataAtCell

例如：

var row = 3;
var col = 7;
var value = "Content of cell 3,7";

hot.setDataAtCell(row, col, value); // Update a single cell

方法还接受一组值来一次更新多个单元格。例如：

var cell_3_7 = [3, 7, "Content of cell 3,7"];
var cell_5_2 = [5, 2, "Content of cell 5,2"];

hot.setDataAtCell([ cell_3_7, cell_5_2 ]); // Update a multiple cells

请注意，Handsontable 文档 不建议 手动重新渲染整个 table。

render()

Calling this method manually is not recommended. Handsontable tries to render itself by choosing the most optimal moments in its lifecycle.

Source: https://handsontable.com/docs/7.2.2/Core.html#render

更新 Handsontable 中的特定单元格

Update particular cell in Handsontable

javascript

handsontable