Ag Grid 表格树 Vue Data Grid: Tree Data

前往官网查看：Vue Data Grid: Tree Data

使用树形数据来显示具有父/子关系的数据，其中的父/子关系是作为数据的一部分提供的。例如，一个文件夹可以包含零个或多个文件和其他文件夹。

在介绍更高级的用例之前，本节介绍使用树数据的简单方法。

---

Tree Data 模式

为了将网格设置为与树数据一起使用，只需使用以下命令通过网格选项启用树数据模式：

<ag-grid-vue
    :treeData="treeData"
    /* other grid options ... */>
</ag-grid-vue>

this.treeData = true;

---

提供 Tree Data

当向网格提供树状数据时，你要实现gridOptions.getDataPath(data)回调，告诉网格每一行的层次结构。回调会返回一个string[]，每个元素都指定了树的一个层次。下面是两个以不同方式呈现层次结构的例子。

• getDataPath: GetDataPath
  • 当treeData = true时，在处理树状数据时使用的回调。

getDataPath: GetDataPath<TData>;

interface GetDataPath<TData = any> {
    (data: TData) : string[]
}

// 层次结构示例，Malcolm 是孩子或 Erica
// + Erica
//   - Malcolm

// ############
// Example #1 - 数据中的层次结构已经是一个字符串数组
// ############
const rowData = [
    { orgHierarchy: ['Erica'], jobTitle: "CEO", employmentType: "Permanent" },
    { orgHierarchy: ['Erica', 'Malcolm'], jobTitle: "VP", employmentType: "Permanent" }
    ...
]
// 只需返回层次结构，不需要转换
getDataPath: data => {
    return data.orgHierarchy;
}

// ############
// Example #2 - 层次结构是一个路径字符串，需要转换
// ############
const rowData = [
    { path: "Erica", jobTitle: "CEO", employmentType: "Permanent" },
    { path: "Erica/Malcolm", jobTitle: "VP", employmentType: "Permanent" }
    ...
]
// 回调将例如 "Erica/Malcolm"转换为["Erica", "Malcolm"]
getDataPath: data => {
    return data.path.split('/'); // path: "Erica/Malcolm"
}

---

配置组列

有两种配置组列的方法：

• Auto Column Group: 这是在树数据模式下由网格自动选择的，但是您可以覆盖默认值。
• Custom Column Group: 您可以提供自己的自定义列组定义，这样可以更好地控制组列的显示方式。

Auto Column Group

当网格使用树数据时，不需要明确指定组列，因为网格将使用自动组列(Auto Group Column)。 但是，您可能想要覆盖一些默认值，如下所示：

<ag-grid-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.autoGroupColumnDef = {
    headerName: "My Group",
    width: 300,
    cellRendererParams: {
        suppressCount: true // 是否禁用标题行菜单
    }
};

Custom Column Group

如上所述，提供您自己的自定义列组的优点是可以让您完全控制列组的显示，但是它不如使用默认的自动列组方便。

一个显著的区别是，整个dataPath数组将作为一个值被提供，而不仅仅是当前节点的值。

更多细节见自定义组列(Custom Group Columns)

对于树形数据，不可能像对行分组那样有多个组的显示列。当做树状数据时，你应该只有一列来显示组。

---

示例：组织层次结构

下面的例子结合了上述所有步骤，展示了一个简化的组织层次结构。

前往查看示例：Org Hierarchy

---

填充组

如果组级别不需要数据，则不必在路径中包含每个级别的条目，如下所示：

// 提供的所有路径级别
const rowData = [
    { filePath: ['Documents'] },
    { filePath: ['Documents', 'txt'] },
    { filePath: ['Documents', 'txt', 'notes.txt'], dateModified: "21 May 2017, 13:50", size: "14 KB" }
    ...
]

// 只提供叶子级别
const rowData = [
    { filePath: ['Documents', 'txt', 'notes.txt'], dateModified: "21 May 2017, 13:50", size: "14 KB" }
    ...
]

上面的第二个变量省略了’Documents’和’txt’节点的行数据条目，在这种情况下，网格将为这些节点创建填充组。

下面这个例子包含列Group Type，以突出哪些节点是在行数据中提供的，哪些是由网格填充生成的。

前往查看示例：Filler Nodes

由于Filler Groups是由网格生成的，因此它们不会包含RowNode上的数据属性。 如果你想为每个组提供一个id，即使在组级别没有显示数据时，或者如果你需要过滤/排序填充节点，这可能会有所限制。 为了过滤/排序可用，请提供所有节点作为数据集中的真实节点，而不是使用填充节点。

---

Tree Data 聚合(合集、汇总)

当使用树形数据时，用聚合函数定义的列将总是对组节点进行聚合。这意味着任何提供的组数据将被忽略，而支持聚合的值。

但是，如果没有子节点可以聚合，它将默认为行数据中提供的值。

下面的文件浏览器例子展示了对size列的聚合。

此外，你还可以参考聚合( Aggregation)部分的更多细节。

---

Tree Data 过滤

由于树状数据具有父/子关系，默认情况下，当父节点通过过滤器时，所有的子节点都会被包括在内，由于过滤是在所有组的层面上进行的，因此在以下情况下将包含一个组：

1. 它有任何通过过滤器的子节点，或者
2. 它的数据通过了过滤器

要覆盖这一行为以使用常规过滤，请启用以下网格选项属性：

<ag-grid-vue
    :excludeChildrenWhenTreeDataFiltering="true"
    /* other grid options ... */>
</ag-grid-vue>

另外请要注意，设置过滤器(Set Filter)将包含组层次结构中每一级的所有唯一值的列表。下面的文件浏览器例子演示了设置过滤器如何与树形数据一起工作。

---

文件浏览器例子

以下示例提供了一个更复杂的示例，其中包括聚合和过滤：

• Add New Group按钮 - 将在Music下添加一个新的组。
• Move Selected to stuff按钮 - 移动到stuff文件夹中。
• Remove Selected按钮 - 将删除所选组和它的子组。
• Files列 过滤 - 你可以在整个文件树上过滤组和叶子节点的名称。
• Size列 聚合 - 当您将选定的项目移动到stuff中时，您会注意到更新的文件夹大小。

前往查看示例：File Browser

---

树状数据的透视和行分组

在使用树状数据时，不可能进行透视或行分组。这意味着所有与透视（如colDef.pivot，或工具面板中的透视）和行分组（如colDef.rowGroup，或工具面板中的行分组）相关的功能将被禁用。

---

子计数

如果您要显示组的子计数，那么子计数就是所有子和孙子的计数。这与行分组(Row Grouping)不同，行分组只计算叶子层，在树状数据中，所有组的孩子也被计算在内。

---

选择

要启用选择功能，请将gridOptions.rowSelection设置为"single"单选或"multiple"多选，和平常一样。但是有一些限制需要注意。

复选框与点击选择

树数据支持单击选择。 但是，当您显示树数据时，单击行进行选择会造成混淆，因为鼠标单击也用于扩展/收缩行。 出于这个原因，我们建议不要使用单击选择，而是使用复选框选择。

<ag-grid-vue
    :suppressRowClickSelection="suppressRowClickSelection"
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

// 设置为true: 禁用单击时选择行
this.suppressRowClickSelection = true;

// 在组列上使用复选框
this.autoGroupColumnDef = {
    cellRendererParams: {
        checkbox: true,
    }
};

组 选择

如果填充组被移动，填充组不会保持其选择状态。例如，如果你有A->B->C组，其中C是唯一提供的行（所以网格为你创建了A和B组），然后你把补丁改为D->B->C，B组将不会保持它的选择。

示例：选择组和子项

下面是一个演示属性groupSelectsChildren与树数据一起使用的例子。

在下面的示例中，请注意以下事项：

• 选择所有子行将选择父行
• 只选择某行的部分子代，会将其标记为部分选择
• 选择一行，然后在按住 shift 键的同时选择另一行将选择两行之间的所有行
• 选择带有子行的行也将选择所有该行的子行

前往查看示例：Group Selects Children

---

过滤聚合

如果聚合和过滤器在树状数据中被激活，有一件事需要关注。那就是聚合值会随着过滤器的应用而改变，这反过来会影响过滤器的结果。

当不使用树状数据过滤时，这不是一个问题，因为在正常的行分组(Row Grouping)中，组的行（聚集的地方）不被过滤，只有叶子的行被过滤。

但是对于树形数据来说，所有的行都会被过滤，因为所有的行都是组（叶子行只是一个没有孩子的组）。由于这个原因，如果你对一个有聚合功能的列进行过滤，在应用过滤器时，聚合值将是一个移动的目标。

要阻止聚合成为一个移动的目标，你需要设置网格属性suppressAggFilteredOnly=true。这在聚合一节中有解释。