javascript - 应用于 Scroll 上的 Handsontable 网格行的 CSS 无法正常工作

Question

我正在使用 Handsontable 0.11.4 网格，其中加载的行具有黄色背景，单击行中的图标时，有一个逻辑可以删除黄色背景，并且效果很好。

如果我点击 2 行，它会将这些行设置为白色，这是应该的。当我向下滚动时，白行会随之滚动。当您向上滚动时，它会返回到最初选择的行

jsfiddle  - `https://jsfiddle.net/3ukL2yvt/`

重现步骤-

1)点击第1,2行等处的图标。它会变成白色2)向下滚动

滚动后的每 1,2 等行现在都有白色背景(似乎 handsontable 在滚动的幕后使用索引)。有什么办法可以解决吗？

非常感谢任何帮助。

Answer 1

不幸的是，这是预期的行为，原因如下。您看到的是 Handsontable 提供的两个功能:虚拟呈现和无状态 HTML。

虚拟渲染

当您的数据包含数千行时，此功能被广泛用于实现快速表格呈现。它不是将整个表格呈现给 DOM，而是简单地呈现您可以看到的内容以及更多的行。当您滚动时，它会呈现此滚动窗口。这就引出了第二点，即无状态 DOM。

无状态 DOM

Handonstable 采用保留 DOM 的思想，DOM 包含最少的信息，只是其数据对象的反射(reflect)。为此，它经常渲染。因此，与打乱 DOM 元素(例如，将一行从位置 1 移动到位置 2)相反，它只是在其数据对象中交换这两行并重新呈现自身。

这意味着当重新呈现表格时，您使用 CSS 或 JS 对表格所做的任何更改都将被删除。当您滚动时会发生这种情况，因为虚拟渲染器最终将不得不重新渲染表格的新部分。

解决方案

当然有很多方法可以达到你想要的结果，这里是最常见的:

您的配置是 customRenderers。这些函数可以在初始化时通过 columns 或 cells 选项应用于单个单元格或列。这是文档页面上的示例:

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
 }

您看到的是，如果我们将此渲染器应用于所有单元格，那么它会将它们渲染为 Text，并为它们提供所有这些 CSS 规则。

在你的情况下，你可以让你的点击事件通过使用 hotInstance.getSelected() 将 [row,col] 坐标添加到某个数组，我们称它为 点击单元格。然后在您的自定义渲染器中，您将有一个条件，说明如果行和列在 clickedCells 中，则使用您想要的任何 CSS 进行渲染。

应该是吧!