应用于Handsontable网格行上的CSS不能正常工作

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

本文关键字：常工作 工作 不能 CSS 网格 Handsontable 应用于      更新时间：2023-09-26

我使用Handsontable 0.11.4网格，其中行加载有黄色背景，在行中单击图标有一个逻辑来删除黄色背景，它工作得很好。

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

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

复制步骤-

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

每1,2等行后滚动是有白色背景现在(似乎handsontable是使用索引在滚动的幕后)。有什么办法能修好它吗?

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

虚拟呈现

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

无状态的DOM

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

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

<<p> 解决方案/strong>

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

你的处置是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渲染。

应该是这样!

相关文章：