Javascript 在Handsontable中有条件地设置嵌套行的样式

使用React包装器实现Handsontable。数据具有多层嵌套的子行

数据如下所示：

[
{
类别：“A类”，
子类别：空，
子项：空，
值：“abc 123”，
__儿童：[
{
类别：空，
子类别：“子类别1”，
子项：空，
值：“xyz 456”，
},
{
类别：空，
子类别：“子类别2”，
子项：空，
价值：“qwe 987”，
__儿童：[
{
类别：空，
子类别：空，
分项：“分项一”，
价值：“asd 987”，
},
],
},
],
},
{
类别：“B类”，
子类别：空，
子项：空，
值：“abc 345”，
__children:null，
},
]

假设我需要“A类”下的所有东西都是绿色的，但不需要“B类”。如何做到这一点

---

我尝试传递一个

单元格

函数

（行、列、属性）=>{…}

，但这只提供了行和列的索引。行索引根据折叠的类别而变化。因此，我需要能够根据父行的

category

的值设置整行的样式。

由于几乎所有配置都基于行和列索引，所以实现该功能相当困难，我发现的唯一解决方法是沿值添加颜色，并使用自定义渲染器来评估字符串中是否有元数据，您需要事先准备数据

const数据=[
{
类别：“A类”，
子类别：空，
子项：空，
值：“abc 123#颜色：绿色”，
__儿童：[
{
类别：“#颜色：绿色”，
子类别：“子类别1#颜色：绿色”，
子项：空，
值：“xyz 456”
},
{
类别：空，
子类别：“子类别2”，
子项：空，
价值：“qwe 987”，
__儿童：[
{
类别：空，
子类别：空，
子项：“子项一#颜色：绿色”，
价值：“ASD987”
}
]
}
]
},
{
类别：“B类”，
子类别：空，
子项：空，
值：“abc 345”，
__子项：空
}
];
...
常量渲染器=（实例、TD、行、列、属性、值、单元格属性）=>{
TD.innerHTML=“”；
如果（值）{
if（value.indexOf（“#color:”）>=0）{
const[realValue，color]=value.split（“#color:”）；
TD.style.backgroundColor=颜色；
TD.innerHTML=realValue；
}否则{
TD.innerHTML=值；
}
}
返回TD；
};
...

---

您可以看到它在这里工作

谢谢。这很有效。但有一种奇怪的行为。在顶级类别级别传入对象

{label，color}

时，label和color被视为单独的列。知道为什么吗？@markkazanski Jesus！很难处理这个库哈哈哈，我不知道为什么它会创建另一个列，所以我想出了另一个解决方法，添加元数据作为字符串的一部分，并将其拆分以获得颜色，我更新了答案和代码Sandbox，这种解决方法可能会使一些其他功能对您来说很困难，但我看不到任何其他方法：（即使版本不起作用，这将有助于修复它