Tree Data 模式
提供 Tree Data
配置组列
- Auto Column Group
- Custom Column Group
示例：组织层次结构
填充组
Tree Data 聚合(合集、汇总)
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 过滤

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

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

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

<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。这在聚合一节中有解释。

Ag Grid 表格树 Vue Data Grid: Tree Data相关推荐

datagrid底部显示水平滚动_DevExpress WPF v19.1：Data Grid/Tree List等控件功能增强
行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...
ExtJS4.2学习(三)Grid表格（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...
Grid表格的js触发事件
没怎么接触过Grid插件: 解决的问题是:点击Grid表行里的内容触发js方法弹出模态框,用以显示选中内容的详细信息. 思路:给准备要触发的列加上一个css属性,通过这个css属性来获取元素并触发js ...
Kendo UI grid 表格数据更新
1.整行数据更新 //获取grid表格var table0 = $(updateTableID).data("kendoGrid");//删除第一条 var lastTableDa ...
React data grid
React data grid 主要功能:界面显示 Excel 预览,可以将一个对象或者 json 格式化成为界面. 安装 npm install react-data-grid --save 基本使 ...
用 TypeScript 写一个轻量级的 UI 框架之十三：Grid 表格组件（下）
脏数据处理 Grid 的多行数据,修改后要提交到后台.如果大批量的数据一次性提交到后台恐怕不大合理.如果只是修改过那行的数据才提交过去,是比较合理的方式.这些修改的数据,我们称为"脏数据(D ...
Vue 封装grid布局
Grid布局博客地址 Vue-iView-ui 和 Vue-element-ui 的 Grid 布局代码有些冗余,现在封装一套自己的 grid布局以 from表单为例支持表单校验,国际化, ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
ExtJs 日期相加，Grid表格列可编辑
1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: { header : "实际已交货量", ...

Ag Grid 表格树 Vue Data Grid: Tree Data

目录

Tree Data 模式

提供 Tree Data

配置组列

Auto Column Group

Custom Column Group

示例：组织层次结构

填充组

Tree Data 聚合(合集、汇总)

Tree Data 过滤

文件浏览器例子

树状数据的透视和行分组

子计数

选择

复选框与点击选择

组选择

示例：选择组和子项

过滤聚合

Ag Grid 表格树 Vue Data Grid: Tree Data相关推荐

最新文章

热门文章

Ag Grid 表格树 Vue Data Grid: Tree Data

目录

Tree Data 模式

提供 Tree Data

配置组列

Auto Column Group

Custom Column Group

示例：组织层次结构

填充组

Tree Data 聚合(合集、汇总)

Tree Data 过滤

文件浏览器例子

树状数据的透视和行分组

子计数

选择

复选框与点击选择

组 选择

示例：选择组和子项

过滤聚合

Ag Grid 表格树 Vue Data Grid: Tree Data相关推荐

最新文章

热门文章

组选择