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

Question

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

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

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

重现步骤 -

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

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

任何帮助将不胜感激。

Answer 1

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

虚拟渲染

当您的数据包含数千行时，此功能被广泛用于实现快速 table 呈现。它不是将整个 table 渲染到 DOM，而是简单地渲染您可以看到的内容以及更多行。当您滚动时，它会呈现滚动 window。这导致第二点是无状态的 DOM.

无国籍DOM

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

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

的新部分

解决方案

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

对你的性格是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。然后在您的自定义渲染器中，您将有一个条件，说明如果行和列在 clickedCells 中，则使用您想要的任何 CSS 进行渲染。

应该就是了！

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

CSS applied on Handsontable grid row on Scroll is not working properly

javascript

jquery

handsontable