Question

我正在使用Handsontable 0.11.4网格，其中加载的行有黄色背景，点击行中的图标有一个逻辑删除黄色背景，它完美地工作。

如果我点击2行，它会将这些行设置为白色，就像它应该的那样。当我向下滚动时，白色的行会随之滚动。向后滚动时，它会返回到最初选定的行

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

重现的步骤 -

1）单击第1,2行中的图标等。它将变为白色 2）向下滚动

滚动后的每1,2等行现在都有白色背景（似乎在滚动时在幕后使用索引）。有没有办法解决它？

任何帮助都会非常感激。

Answer 1

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

虚拟渲染

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

无状态DOM

Handonstable采用保持包含最少信息的DOM的想法，并且只是其数据对象的反映。为此，它经常渲染。因此，与将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规则。

在您的情况下，您可以让点击事件使用[row,col]添加hotInstance.getSelected()坐标到某个数组，我们称之为clickedCells。然后在您的自定义渲染器中，您将有一个条件，指出行和列是否在clickedCells中，使用您想要的任何CSS进行渲染。

那应该是它！

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

1 个答案: