syncfusion-aspnetcore-tree-view

实现 Syncfusion Core TreeView

何时使用此技能

在需要以下功能时使用此技能：

• 显示分层数据结构 - 以树形格式呈现组织结构图、文件系统、类别树或任何嵌套数据
• 启用用户选择 - 通过键盘和鼠标交互实现单选或多选功能
• 构建交互式树 - 添加拖放、节点编辑、复选框和动态节点操作
• 自定义外观 - 应用模板、图标、动画和样式，以匹配应用的设计
• 处理树事件 - 响应节点交互，包括展开/折叠、选择和编辑事件
• 实现按需加载 - 仅在父节点展开时加载子节点，以优化大型数据集的性能
• 创建符合无障碍要求的界面 - 确保支持键盘导航和屏幕阅读器，满足有无障碍需求的用户

组件概述

Syncfusion TreeView 是一款企业级组件，可在树形结构中显示分层数据，并提供强大的交互功能。它支持本地和远程数据绑定、多种选择模式、拖放操作、节点编辑、复选框以及全面的事件处理。

主要功能

• 数据绑定：支持分层数据、自引用数据、本地数组和远程数据服务（OData、Web API、DataManager）
• 节点交互：单选、多选（Ctrl/Shift 键）、键盘导航（方向键、F2、Delete）
• 选择类型：整行选择、节点文本选择、复选框选择、独立节点状态
• 动态操作：以编程方式添加、删除、更新、刷新和移动节点
• 编辑：通过双击或 F2 键进行就地编辑，并支持验证
• 拖放：全面支持拖放，提供视觉指示器和多节点拖动
• 复选框：父子依赖、自动勾选传递、独立状态
• 自定义：节点模板、自定义图标、CSS 样式、动画效果
• 性能：为大型数据集提供按需加载渲染，并延迟加载子节点
• 无障碍：全面支持键盘操作、ARIA 属性和屏幕阅读器

文档与导航指南

使用本指南，查找实现所需 TreeView 功能的相关文档：

入门

📄 阅读： references/getting-started.md

在需要以下内容时：

• 首次在应用中设置 TreeView
• 了解组件的基本初始化和配置
• 学习前置设置和安装步骤
• 查看第一个可运行的 TreeView 示例

数据绑定与字段配置

📄 阅读： references/data-binding-and-fields.md

在需要以下内容时：

• 从本地数组或远程服务绑定数据
• 配置分层或自引用数据结构
• 将数据源字段映射到 TreeView 属性
• 使用 DataManager 实现远程数据绑定
• 处理按需加载场景

节点选择（单选和多选）

📄 阅读： references/node-selection.md

在需要以下内容时：

• 启用单节点选择
• 使用 Ctrl 和 Shift 键实现多选
• 以编程方式跟踪所选节点
• 响应选择事件
• 阻止选择特定节点

节点展开与折叠

📄 阅读： references/node-expansion.md

在需要以下内容时：

• 控制节点展开/折叠行为
• 配置单击或双击展开
• 处理展开/折叠事件
• 管理已展开节点的状态
• 实现按需加载式展开

复选框和已勾选节点

📄 阅读： references/checkboxes-and-checked-nodes.md

适用于以下场景：

• 在 TreeView 节点中启用复选框
• 跟踪已勾选节点及其状态
• 实现父子关系的自动勾选
• 配置独立的节点勾选状态
• 处理复选框更改事件

拖放操作

📄 阅读： references/drag-and-drop.md

适用于以下场景：

• 启用拖放功能
• 处理单节点和多节点拖动
• 控制放置区域和限制
• 响应拖放生命周期事件
• 禁止拖动特定节点

节点编辑与验证

📄 阅读： references/node-editing.md

适用于以下场景：

• 启用节点文本的就地编辑
• 通过双击或 F2 启用编辑模式
• 在编辑期间验证节点文本
• 禁止编辑特定节点
• 保存或取消编辑操作

模板与样式

📄 阅读： references/templates-and-styling.md

适用于以下场景：

• 使用模板自定义节点外观
• 应用自定义图标和图像
• 配置动画和过渡效果
• 实现整行选择样式
• 使用 CSS 类自定义 TreeView

节点操作与动态操作

📄 阅读： references/node-manipulation.md

适用于以下场景：

• 以编程方式添加新节点
• 移除现有节点
• 更新节点文本或属性
• 刷新节点内容
• 将节点移动到其他位置
• 以编程方式获取树数据

事件与键盘导航

📄 阅读： references/events-and-keyboard-navigation.md

适用于以下场景：

• 处理所有 TreeView 事件（展开、选择、勾选、拖动、编辑）
• 实现键盘导航支持
• 响应用户交互
• 阻止特定操作的默认行为
• 跟踪组件生命周期事件

完整 API 参考

📄 阅读： references/api-reference.md

适用于以下场景：

• 查阅特定属性的定义和默认值
• 查找带参数说明的方法签名
• 了解事件处理程序的参数和结构
• 参考 FieldsSettings 配置选项
• 查看用于展开/折叠效果的 AnimationSettings
• 获取包含所有属性、方法和事件代码示例的完整 API 文档

快速入门示例

下面是一个可立即运行 TreeView 的最简示例：

<ejs-treeview id="treeAdvanced" showCheckBox="true" 
    allowMultiSelection="true" allowDragAndDrop="true" allowEditing="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

常见模式

模式 1：使用事件处理的单选

<ejs-treeview id="treeAdvanced" allowMultiSelection="false">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

模式 2：带复选框的多选

<ejs-treeview id="treeAdvanced" showCheckBox="true" 
    allowMultiSelection="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

模式 3：使用按需加载的延迟加载

<ejs-treeview id="treeAdvanced" loadOnDemand="true">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild"></e-treeview-fields>
</ejs-treeview>

模式 4：带验证的可编辑树

<ejs-treeview id="treeRestricted" allowEditing="true" nodeEditing="nodeEditing" nodeEdited="nodeEdited">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="name"></e-treeview-fields>
</ejs-treeview>

<script>
    function nodeEditing(args) {
        if (args.newText.length < 3) {
          args.cancel = true;
        }
    }
    function nodeEdited(args) {
      console.log('Node text updated to:', args.newText);
    }
</script>

模式 5：带限制的拖放

<ejs-treeview id="treeNodeDrag" allowDragAndDrop="true" 
    nodeDragStart="onDragStart" 
    nodeDropped="nodeDropped">
    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" text="name"></e-treeview-fields>
</ejs-treeview>

<script>
    function onDragStart(args) {
      if (!args.nodeData.pid) {
          args.cancel = true;
      }
    }
    
    function nodeDropped(args) {
        console.log('Node dropped successfully');
    }
</script>

关键属性参考

属性	类型	默认值	用途
fields	FieldsSettings	-	配置数据源和字段映射
dataSource	array | DataManager	[]	TreeView 节点的数据源
showCheckBox	boolean	false	显示复选框以选择节点
allowMultiSelection	boolean	false	启用多节点选择
allowDragAndDrop	boolean	false	启用拖放操作
allowEditing	boolean	false	启用节点原位编辑
allowTextWrap	boolean	false	自动换行显示溢出的节点文本
loadOnDemand	boolean	true	展开父节点时加载子节点
fullRowSelect	boolean	false	选择整行而不是文本
fullRowNavigable	boolean	false	使用键盘导航整行
expandOn	string	'Click'	展开/折叠的操作（Click、DblClick、None）
sortOrder	string	'None'	对节点排序（None、Ascending、Descending）
selectedNodes	string[]	[]	已选节点 ID
checkedNodes	string[]	[]	已勾选节点 ID
expandedNodes	string[]	[]	已展开节点 ID
cssClass	string	''	自定义 CSS 类
disabled	boolean	false	禁用 TreeView 交互
enablePersistence	boolean	false	在页面重新加载后保留状态
enableRtl	boolean	false	从右向左渲染

常见用例

用例 1：文件管理器树

显示包含文件夹和文件的分层文件系统，让用户浏览、选择和管理文件。

主要功能：分层数据、文件/文件夹类型图标、多选、通过拖放移动文件、用于执行操作的上下文菜单。

相关参考：data-binding-and-fields.md、templates-and-styling.md、drag-and-drop.md

用例 2：组织结构图

展示公司的层级结构，按部门和团队组织员工。

主要功能：分层数据、用于展示员工详情的节点模板、搜索/筛选、单选、展开/折叠。

相关参考：data-binding-and-fields.md、templates-and-styling.md、node-selection.md

用例 3：权限/角色管理

显示分层权限或角色，供用户为角色选择多个权限。

主要功能：复选框、多选、父子依赖、自动勾选传播、复选框事件。

相关参考：checkboxes-and-checked-nodes.md、node-selection.md

用例 4：产品类别浏览器

浏览产品类别，并支持筛选和搜索。

主要功能：通过按需加载处理大型数据集、单选、键盘导航、单击展开。

相关参考：data-binding-and-fields.md、node-expansion.md、events-and-keyboard-navigation.md

用例 5：菜单结构编辑器

允许管理员创建和编辑分层菜单结构。

主要功能：节点编辑、添加/删除/移动节点、模板、拖放、带验证的原位编辑。

相关参考：node-manipulation.md、node-editing.md、templates-and-styling.md

总结

Syncfusion TreeView 组件为显示和交互式操作分层数据提供了完整的解决方案。它将强大的数据绑定功能与多选、拖放、编辑和复选框等丰富的交互功能相结合。通过模板和样式提供丰富的自定义选项，你可以创建满足各种业务需求的复杂树形界面。

从 Getting Started 参考开始，设置你的第一个 TreeView，然后根据需求，使用上方的文档指南探索具体功能。

---

后续步骤：在 Documentation and Navigation Guide 部分中选择你的第一个任务，并按照参考指南实现 TreeView 功能。