在 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

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

Styling nested rows conditionally in Handsontable

javascript

handsontable

reactjs