仅将 CSS 样式应用于树数据中的最后一行

Question

如何通过 CSS 在树数据视图中 select 最后 child/row。我找不到 select 或指定该行在树视图中最后 child 的行。 child 行的长度也不是固定的，即树结构中可以有 n child

例如

parent行

-- 第 child 行

-- 可以是任意号。中间的行数

-- 最后 child

Answer 1

您可以通过 getRowStyle props 回调来有条件地设置行样式。在这种情况下，您应该检查 RowNode.lastChild.

的行

编辑：如果您不想将样式应用到网格的最后一行，您可能需要在级别过滤掉 RowNodes 0

<AgGridReact
  treeData
  getRowStyle={(e) => {
    if (e.node.lastChild && e.node.level > 0) {
      return { backgroundColor: "pink" };
    }
  }}
  {...}
/>

如果您使用 css 模块，您可以使用 getRowClass.

为要根据条件设置样式的特定行指定 class

<AgGridReact
  treeData
  getRowClass={(e) => {
    if (e.node.lastChild && e.node.level > 0) {
      return "last-child";
    }
    return "";
  }}
  {...}
/>

在您的 css 文件中

.last-child {
  background-color: pink;
}

仅将 CSS 样式应用于树数据中的最后一行

Apply CSS styles only to the last row in the tree data

reactjs

ag-grid

ag-grid-react

现场演示