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

Posted 2023-03-22

【中文标题】应用于 Scroll 上的 Handsontable 网格行的 CSS 无法正常工作

【英文标题】：CSS applied on Handsontable grid row on Scroll is not working properly

【发布时间】：2015-12-23 22:47:20

【问题描述】：

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

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

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

复制步骤 -

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

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

任何帮助将不胜感激。

【参考方案1】：

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

虚拟渲染

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

无状态 DOM

Handonstable 采用了保持 DOM 的想法，该 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 规则。

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

应该是这样的！

【讨论】：

太棒了，如果您可以通过将其标记为“已回答”来结束此问题，它将真正帮助我们的“handsontable”社区:)