在Scroll上的Handsontable网格行上应用的CSS无法正常工作 [英] CSS applied on Handsontable grid row on Scroll is not working properly

问题描述

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

I am using Handsontable 0.11.4 grid where the rows on load have yellow background, on click of icon in row there is a logic to remove yellow background and it works perfectly.

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

if I click on 2 rows it sets those rows white, as it should. when I scroll down the white rows scroll with it. when you scroll back up it returns to the originally selected row

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

重现的步骤 -

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

1)Click on icon in row 1,2 etc. It will become white 2)Scroll down

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

Every 1,2 etc row after scroll is having white background now(seems handsontable is using index behind the scenes on scroll). Is there any way to fix it?

任何帮助都会非常感激。

Any help would be really appreciated.

推荐答案

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

This is unfortunately the expected behavior and here is why. What you are seeing is two of the features Handsontable offers: Virtual Rendering and Stateless HTML.

虚拟渲染

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

This feature is used extensively to achieve fast table rendering when your data contains thousands of rows. Instead of rendering the entire table to the DOM, it simply renders what you can see plus a few more rows. As you scroll, it renders this rolling window. This leads to the second point which is a stateless DOM.

无状态DOM

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

Handonstable adopts the idea of keeping a DOM which contains minimal information and is just a reflection of its data objects. To this end, it renders fairly often. So, as opposed to messing with the DOM elements to, say, move a row from position 1 to position 2, it simply swaps these two rows in its data objects and re-renders itself.

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

What this means is that any changes you make to the table using CSS or JS will get wiped when the table is re-rendered. This happens when you scroll since the virtual renderer will eventually have to re-render a new section of your table.

解决方案

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

Of course there are many ways to achieve your desired result and here is the most common:

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

To your disposition is are customRenderers. These are functions that can be applied to individual cells or columns through the columns or cells options upon initialization. Here is the example on the docs page:

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规则。

What you see is that if we applied this renderer to all cells, then it would render them as Text, and give them all of those CSS rules.

在你的情况下，你可能有你的点击事件通过使用 hotInstance.getSelected（）添加 [row，col] 坐标到一些数组，让我们调用它 clickedCells 。然后在您的自定义渲染器中，您将有一个条件，表示行和列是否在 clickedCells 中，使用您想要的任何CSS进行渲染。

In your case, you could have your click event add the [row,col] coordinates by using hotInstance.getSelected() to some array, let's call it clickedCells. Then in your custom renderer, you would have a conditional that says if the row and column are in clickedCells, render with whatever CSS you want.

那应该是它！

这篇关于在Scroll上的Handsontable网格行上应用的CSS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！