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

Posted 2023-03-22

【中文标题】在 Handsontable 中有条件地设置嵌套行的样式

【英文标题】：Styling nested rows conditionally in Handsontable

【发布时间】：2021-01-20 20:18:33

【问题描述】：

对 Handsontable 使用 React 包装器。数据嵌套了几级深的子行。

数据如下所示：

[
  
    category: "Category A",
    subCategory: null,
    subItem: null,
    value: "abc 123",
    __children: [
      
        category: null,
        subCategory: "Sub Category 1",
        subItem: null,
        value: "xyz 456",
      ,
      
        category: null,
        subCategory: "Sub Category 2",
        subItem: null,
        value: "qwe 987",
        __children: [
          
            category: null,
            subCategory: null,
            subItem: "Sub Item I",
            value: "asd 987",
          ,
        ],
      ,
    ],
  ,
  
    category: "Category B",
    subCategory: null,
    subItem: null,
    value: "abc 345",
    __children: null,
  ,
]

假设我需要“A 类”下的所有内容都为绿色，但“B 类”下不需要。怎么可能？

我尝试传递一个 cells 函数 (row, col, prop) => ... 但这给了我行和列的索引。行索引根据折叠的类别而变化。所以，我需要能够根据父行的category 的值来设置整行的样式。

【参考方案1】：

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

const data = [
    
      category: "Category A",
      subCategory: null,
      subItem: null,
      value: "abc 123#color:green",
      __children: [
        
          category: "#color:green",
          subCategory: "Sub Category 1#color:green",
          subItem: null,
          value: "xyz 456"
        ,
        
          category: null,
          subCategory: "Sub Category 2",
          subItem: null,
          value: "qwe 987",
          __children: [
            
              category: null,
              subCategory: null,
              subItem: "Sub Item I#color:green",
              value: "asd 987"
            
          ]
        
      ]
    ,
    
      category: "Category B",
      subCategory: null,
      subItem: null,
      value: "abc 345",
      __children: null
    
  ];

...

const renderer = (instance, TD, row, col, prop, value, cellProperties) => 
  TD.innerhtml = "";
  if (value) 
    if (value.indexOf("#color:") >= 0) 
      const [realValue, color] = value.split("#color:");
      TD.style.backgroundColor = color;
      TD.innerHTML = realValue;
     else 
      TD.innerHTML = value;
    
  
  return TD;
;

...

      <HotTable
        data=data
        colHeaders=true
        rowHeaders=true
        nestedRows=true
        observeChanges
        renderer=renderer
        licenseKey="non-commercial-and-evaluation"
      />

你可以在这里看到它在https://codesandbox.io/s/handsontable-epbpi?file=/src/index.tsx

【讨论】：

谢谢。这行得通。但是有一个奇怪的行为。在***类别级别传入对象label, color 时，标签和颜色将被视为单独的列。知道为什么吗？

@markkazanski 耶稣！很难处理这个库哈哈哈，我不知道为什么它会创建另一个列，所以我想出了另一个解决方法，将元数据添加为字符串的一部分并将其拆分以获得颜色，我更新了答案和代码和框，这种解决方法可能会使您的其他一些功能变得困难，但我没有看到任何其他方式:(即使版本不起作用，这对修复它很有用handsontable.com/docs/8.1.0/tutorial-cell-editor.html