syncfusion-aspnetcore-tree-view

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Core TreeView

实现Syncfusion ASP.NET Core TreeView组件

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Display hierarchical data structures - Render organizational charts, file systems, category trees, or any nested data in a tree format
Enable user selection - Implement single or multi-select functionality with keyboard and mouse interactions
Build interactive trees - Add drag-and-drop, node editing, checkboxes, and dynamic node manipulation
Customize appearance - Apply templates, icons, animations, and styling to match your application design
Handle tree events - Respond to node interactions with expand/collapse, selection, and editing events
Implement load-on-demand - Optimize performance for large datasets by loading child nodes only when parent nodes expand
Create accessibility-compliant interfaces - Ensure keyboard navigation and screen reader support for users with accessibility needs

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

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

Component Overview

组件概述

The Syncfusion TreeView is an enterprise-grade component that displays hierarchical data in a tree structure with powerful interactive features. It supports local and remote data binding, multiple selection modes, drag-and-drop operations, node editing, checkboxes, and comprehensive event handling.

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

Key Capabilities

核心功能

Data Binding: Support for hierarchical data, self-referential data, local arrays, and remote data services (OData, Web API, DataManager)
Node Interactions: Single selection, multi-selection (Ctrl/Shift keys), keyboard navigation (arrow keys, F2, Delete)
Selection Types: Full row selection, node text selection, checkbox selection, independent node states
Dynamic Operations: Add, remove, update, refresh, and move nodes programmatically
Editing: In-place editing with double-click or F2 key, with validation support
Drag-and-Drop: Full drag-and-drop support with visual indicators and multi-node dragging
Checkboxes: Parent-child dependency, auto-check propagation, independent states
Customization: Node templates, custom icons, CSS styling, animation effects
Performance: Load-on-demand rendering for large datasets, lazy loading of child nodes
Accessibility: Full keyboard support, ARIA attributes, screen reader compatibility

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

Documentation and Navigation Guide

文档与导航指南

Use this guide to navigate to the specific TreeView feature you need to implement:

使用本指南导航到你需要实现的特定TreeView功能：

Getting Started

快速入门

📄 Read: references/getting-started.md

When you need to:

Set up TreeView in your application for the first time
Understand basic component initialization and configuration
Learn prerequisite setup and installation steps
See your first working TreeView example

📄 阅读： references/getting-started.md

当你需要：

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

Data Binding and Field Configuration

数据绑定与字段配置

📄 Read: references/data-binding-and-fields.md

When you need to:

Bind data from local arrays or remote services
Configure hierarchical or self-referential data structures
Map data source fields to TreeView properties
Implement remote data binding with DataManager
Handle load-on-demand scenarios

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

当你需要：

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

Node Selection (Single and Multi-Select)

节点选择（单选与多选）

📄 Read: references/node-selection.md

When you need to:

Enable single node selection
Implement multi-selection with Ctrl and Shift keys
Track selected nodes programmatically
Respond to selection events
Prevent selection for specific nodes

📄 阅读： references/node-selection.md

当你需要：

启用单节点选择
实现支持Ctrl和Shift键的多选功能
以编程方式跟踪选中的节点
响应选择事件
禁止特定节点的选择

Node Expansion and Collapsing

节点展开与折叠

📄 Read: references/node-expansion.md

When you need to:

Control node expand/collapse behavior
Configure expand-on-click or double-click
Handle expand/collapse events
Manage expanded nodes state
Implement load-on-demand expansion

📄 阅读： references/node-expansion.md

当你需要：

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

Checkboxes and Checked Nodes

复选框与选中节点

📄 Read: references/checkboxes-and-checked-nodes.md

When you need to:

Enable checkboxes in TreeView nodes
Track checked nodes and their states
Implement auto-check for parent-child relationships
Configure independent node check states
Handle checkbox change events

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

当你需要：

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

Drag and Drop Operations

拖放操作

📄 Read: references/drag-and-drop.md

When you need to:

Enable drag-and-drop functionality
Handle single and multi-node dragging
Control drop zones and restrictions
Respond to drag-drop lifecycle events
Prevent dragging for specific nodes

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

当你需要：

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

Node Editing and Validation

节点编辑与验证

📄 Read: references/node-editing.md

When you need to:

Enable in-place node text editing
Implement edit mode with double-click or F2
Validate node text during editing
Prevent editing for specific nodes
Save or cancel edit operations

📄 阅读： references/node-editing.md

当你需要：

启用节点文本的就地编辑
实现双击或F2键的编辑模式
在编辑过程中验证节点文本
禁止特定节点的编辑
保存或取消编辑操作

Templates and Styling

模板与样式

📄 Read: references/templates-and-styling.md

When you need to:

Customize node appearance with templates
Apply custom icons and images
Configure animations and transitions
Implement full-row selection styling
Use CSS classes for TreeView customization

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

当你需要：

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

Node Manipulation and Dynamic Operations

节点操作与动态功能

📄 Read: references/node-manipulation.md

When you need to:

Add new nodes programmatically
Remove existing nodes
Update node text or properties
Refresh node content
Move nodes to different positions
Get tree data programmatically

📄 阅读： references/node-manipulation.md

当你需要：

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

Events and Keyboard Navigation

事件与键盘导航

📄 Read: references/events-and-keyboard-navigation.md

When you need to:

Handle all TreeView events (expand, select, check, drag, edit)
Implement keyboard navigation support
Respond to user interactions
Prevent default behavior for specific actions
Track component lifecycle events

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

当你需要：

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

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

When you need to:

Look up specific property definitions and default values
Find method signatures with parameter descriptions
Understand event handler parameters and structure
Reference FieldsSettings configuration options
Check AnimationSettings for expand/collapse effects
Get complete API documentation with code examples for all properties, methods, and events

📄 阅读： references/api-reference.md

当你需要：

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

Quick Start Example

快速入门示例

Here's a minimal example to get TreeView running immediately:

html

<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>

以下是一个让TreeView立即运行的最简示例：

html

<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>

Common Patterns

常见模式

Pattern 1: Single Selection with Event Handling

模式1：带事件处理的单选

html

<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>

html

<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>

Pattern 2: Multi-Select with Checkboxes

模式2：带复选框的多选

html

<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>

html

<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>

Pattern 3: Lazy Loading with Load-on-Demand

模式3：按需加载的懒加载

html

<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>

html

<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>

Pattern 4: Editable Tree with Validation

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

html

<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>

html

<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>

Pattern 5: Drag-Drop with Restrictions

模式5：带限制的拖放

html

<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>

html

<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>

Key Props Reference

核心属性参考

Property	Type	Default	Purpose
`fields`	FieldsSettings	-	Configure data source and field mappings
`dataSource`	array \| DataManager	[]	Data source for TreeView nodes
`showCheckBox`	boolean	false	Show checkboxes for node selection
`allowMultiSelection`	boolean	false	Enable multi-node selection
`allowDragAndDrop`	boolean	false	Enable drag-and-drop operations
`allowEditing`	boolean	false	Enable in-place node editing
`allowTextWrap`	boolean	false	Wrap node text for overflow
`loadOnDemand`	boolean	true	Load child nodes on parent expand
`fullRowSelect`	boolean	false	Select entire row instead of text
`fullRowNavigable`	boolean	false	Navigate entire row with keyboard
`expandOn`	string	'Click'	Action to expand/collapse (Click, DblClick, None)
`sortOrder`	string	'None'	Sort nodes (None, Ascending, Descending)
`selectedNodes`	string[]	[]	Selected node IDs
`checkedNodes`	string[]	[]	Checked node IDs
`expandedNodes`	string[]	[]	Expanded node IDs
`cssClass`	string	''	Custom CSS classes
`disabled`	boolean	false	Disable TreeView interaction
`enablePersistence`	boolean	false	Persist state between page reloads
`enableRtl`	boolean	false	Right-to-left rendering

属性	类型	默认值	用途
`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	从右到左渲染

Common Use Cases

常见使用场景

Use Case 1: File Manager Tree

场景1：文件管理器树形结构

Display a hierarchical file system with folders and files, enabling users to browse, select, and manage files.

Key Features: Hierarchical data, icons for file/folder types, multi-select, drag-drop for moving files, context menu for operations.

Related References: data-binding-and-fields.md, templates-and-styling.md, drag-and-drop.md

展示包含文件夹和文件的层级文件系统，允许用户浏览、选择和管理文件。

核心功能：层级数据、文件/文件夹类型图标、多选、拖放移动文件、操作上下文菜单。

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

Use Case 2: Organizational Chart

场景2：组织结构图

Show company hierarchy with employees organized by departments and teams.

Key Features: Hierarchical data, node templates for employee details, search/filter, single selection, expand/collapse.

Related References: data-binding-and-fields.md, templates-and-styling.md, node-selection.md

展示按部门和团队划分的公司员工层级。

核心功能：层级数据、员工详情节点模板、搜索/筛选、单选、展开/折叠。

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

Use Case 3: Permission/Role Management

场景3：权限/角色管理

Display hierarchical permissions or roles where users select multiple permissions for roles.

Key Features: Checkboxes, multi-select, parent-child dependency, auto-check propagation, checkbox events.

Related References: checkboxes-and-checked-nodes.md, node-selection.md

展示层级权限或角色，用户可为角色选择多个权限。

核心功能：复选框、多选、父子依赖关系、自动勾选传播、复选框事件。

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

Use Case 4: Product Category Browser

场景4：产品分类浏览器

Browse product categories with filtering and search capability.

Key Features: Large dataset with load-on-demand, single selection, keyboard navigation, expand-on-click.

Related References: data-binding-and-fields.md, node-expansion.md, events-and-keyboard-navigation.md

浏览具备筛选和搜索功能的产品分类。

核心功能：大型数据集按需加载、单选、键盘导航、单击展开。

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

Use Case 5: Menu Structure Editor

场景5：菜单结构编辑器

Allow administrators to create and edit hierarchical menu structures.

Key Features: Node editing, add/remove/move nodes, templates, drag-drop, in-place editing with validation.

Related References: node-manipulation.md, node-editing.md, templates-and-styling.md

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

核心功能：节点编辑、添加/删除/移动节点、模板、拖放、带验证的就地编辑。

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

Summary

总结

The Syncfusion TreeView component provides a complete solution for displaying and interacting with hierarchical data. It combines powerful data binding capabilities with rich interactive features like multi-selection, drag-and-drop, editing, and checkboxes. With extensive customization options through templates and styling, you can create sophisticated tree-based interfaces that meet any business requirement.

Start with the Getting Started reference to set up your first TreeView, then explore specific features using the documentation guide above based on your requirements.

Next Steps: Choose your first task from the Documentation and Navigation Guide section and follow the reference guide to implement your TreeView feature.

Syncfusion TreeView组件为展示和交互层级数据提供了完整解决方案。它结合了强大的数据绑定能力和丰富的交互功能，如多选、拖放、编辑和复选框。通过模板和样式的广泛自定义选项，你可以创建满足任何业务需求的复杂树形界面。

从快速入门参考开始设置你的第一个TreeView，然后根据需求使用上述文档指南探索特定功能。

下一步：从文档与导航指南部分选择你的第一个任务，并遵循参考指南实现TreeView功能。