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

Question

对 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 的值来设置整行的样式。

Answer 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