syncfusion-react-dropdown-tree

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Dropdown Tree

实现Dropdown Tree

The Dropdown Tree component displays hierarchical data in a collapsible tree structure within a dropdown interface. It combines tree navigation with dropdown accessibility, supporting multi-selection via checkboxes, lazy loading for large datasets, comprehensive customization through templates and events, filtering, and full accessibility with RTL and localization support.

Dropdown Tree组件在下拉界面中以可折叠的树形结构展示层级数据。它将树形导航与下拉控件的易用性相结合，支持通过复选框进行多选、针对大型数据集的懒加载、通过模板和事件实现全面自定义、筛选功能，以及具备RTL和本地化支持的完整无障碍访问能力。

When to Use This Skill

何时使用该组件

Use Dropdown Tree immediately when you need to:

Display hierarchical data - Show nested categories, organizational structures, file trees, or department hierarchies
Enable multi-selection - Allow users to select multiple items with checkbox support or keyboard modifiers
Support lazy loading - Optimize performance with large datasets by loading children on demand
Customize display - Use templates to format items, headers, footers, selected values, or error states
Implement filtering - Enable search functionality with configurable filter types (StartsWith, EndsWith, Contains)
Ensure accessibility - Provide WAI-ARIA compliance, keyboard navigation, and screen reader support
Support multiple languages - Localize UI with customizable keys and RTL support
Bind remote data - Integrate with OData, OData V4, Web APIs, or other remote data services
Handle complex selection logic - Use events, auto-check hierarchy, or selective node disabling

当你需要以下功能时，请立即使用Dropdown Tree：

展示层级数据 - 显示嵌套分类、组织结构、文件树或部门层级
启用多选功能 - 允许用户通过复选框或键盘修饰键选择多个项
支持懒加载 - 通过按需加载子节点优化大型数据集的性能
自定义展示 - 使用模板格式化项、页眉、页脚、选中值或错误状态
实现筛选功能 - 启用带有可配置筛选类型（StartsWith、EndsWith、Contains）的搜索功能
确保无障碍访问 - 提供WAI-ARIA合规性、键盘导航和屏幕阅读器支持
支持多语言 - 通过可自定义的键和RTL支持实现UI本地化
绑定远程数据 - 与OData、OData V4、Web API或其他远程数据服务集成
处理复杂选择逻辑 - 使用事件、自动勾选层级结构或选择性禁用节点

Component Overview

组件概述

The Dropdown Tree features:

Hierarchical display: Local (hierarchical/self-referential) and remote data sources with flexible binding
Multi-selection modes: Checkboxes with auto-check, multi-select with Ctrl/Shift keys, single select (default)
Flexible templates: Item, value, header, footer, noRecords, and actionFailure templates for custom rendering
Performance optimization: Lazy loading (load-on-demand) for efficient large dataset handling
Search & filtering: Built-in filter bar with configurable filter types and case sensitivity options
Comprehensive events: change, select, dataBound, filtering, beforeOpen, focus, keyPress, and popup events
Accessibility: Full WAI-ARIA (roles, attributes), keyboard navigation, screen reader support, WCAG 2.2 compliance
Localization: Multi-language support with 4 customizable keys and locale override
RTL support: Right-to-left layout rendering
Tree settings: Advanced configuration (expandOn, autoCheck, loadOnDemand, checkDisabledChildren)
Field mapping: Flexible data structure support (value, text, child, parentValue, expanded, hasChildren, selectable, iconCss, imageUrl, htmlAttributes)
Display modes: Default, Delimiter, and Custom modes for selected items

Dropdown Tree具备以下特性：

层级展示：支持本地（层级/自引用）和远程数据源，绑定方式灵活
多选模式：带有自动勾选功能的复选框、结合Ctrl/Shift键的多选、单选（默认）
灵活模板：项模板、值模板、页眉模板、页脚模板、无数据模板、加载失败模板，支持自定义渲染
性能优化：懒加载（按需加载），高效处理大型数据集
搜索与筛选：内置筛选栏，支持可配置的筛选类型和大小写敏感选项
全面的事件：change、select、dataBound、filtering、beforeOpen、focus、keyPress、popup事件
无障碍访问：完全符合WAI-ARIA（角色、属性）标准，支持键盘导航、屏幕阅读器，兼容WCAG 2.2
本地化：多语言支持，包含4个可自定义键和区域设置覆盖
RTL支持：右到左布局渲染
树形设置：高级配置（expandOn、autoCheck、loadOnDemand、checkDisabledChildren）
字段映射：灵活支持数据结构（value、text、child、parentValue、expanded、hasChildren、selectable、iconCss、imageUrl、htmlAttributes）
展示模式：选中项的默认模式、分隔符模式和自定义模式

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package dependencies (npm install command)
React/TypeScript project setup (Vite and Create React App)
Basic component implementation and initialization
CSS imports and theme configuration
First render and minimal working example

📄 阅读：references/getting-started.md

安装与包依赖（npm install命令）
React/TypeScript项目搭建（Vite和Create React App）
基础组件实现与初始化
CSS导入和主题配置
首次渲染与最小可用示例

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local data binding (hierarchical and self-referential structures)
Remote data with DataManager and various adaptors (OData, OData V4, WebAPI, URL)
Field mapping for value, text, child, parentValue, expanded, hasChildren
Load on demand (lazy loading) for large datasets
Preventing node selection with selectable field
Query configuration for remote data services

📄 阅读：references/data-binding.md

本地数据绑定（层级和自引用结构）
结合DataManager和各种适配器（OData、OData V4、WebAPI、URL）的远程数据绑定
value、text、child、parentValue、expanded、hasChildren的字段映射
针对大型数据集的按需加载（懒加载）
通过selectable字段阻止节点选择
远程数据服务的查询配置

Checkbox & Multi-Selection

复选框与多选

📄 Read: references/checkbox-selection.md

Enabling checkbox support with
```
showCheckBox
```
property
Multi-selection workflow and accessing selected values
Auto-check hierarchical behavior (parent-child synchronization)
Select All feature with customizable
```
selectAllText
```
and
```
unSelectAllText
```
Intermediate checkbox states for partial selection
CheckDisabledChildren behavior for disabled nodes

📄 阅读：references/checkbox-selection.md

使用
```
showCheckBox
```
属性启用复选框支持
多选工作流与选中值的获取
自动勾选层级行为（父子节点同步）
带有可自定义
```
selectAllText
```
和
```
unSelectAllText
```
的全选功能
部分选中状态的中间复选框
针对禁用节点的checkDisabledChildren行为

Templates

模板

📄 Read: references/templates.md

Item template for custom list item rendering
Value template for selected display customization
Header template for static content above items
Footer template for static content below items
NoRecords template for empty state handling
ActionFailure template for error state handling
CustomTemplate for multi-select display customization
Template expression syntax and data access patterns

📄 阅读：references/templates.md

用于自定义列表项渲染的项模板
用于自定义选中值展示的值模板
用于项列表上方静态内容的页眉模板
用于项列表下方静态内容的页脚模板
用于空状态处理的无数据模板
用于错误状态处理的加载失败模板
用于多选展示自定义的CustomTemplate
模板表达式语法与数据访问模式

Multi-Selection & Filtering

多选与筛选

📄 Read: references/multi-selection-filtering.md

```
allowMultiSelection
```
property and Ctrl/Shift keyboard interaction
Display modes: Default, Delimiter, Custom
```
delimiterChar
```
and
```
mode
```
configuration
```
allowFiltering
```
and filter bar implementation
Filter types: StartsWith, EndsWith, Contains
```
filterBarPlaceholder
```
customization
```
ignoreCase
```
and
```
ignoreAccent
```
options

📄 阅读：references/multi-selection-filtering.md

```
allowMultiSelection
```
属性与Ctrl/Shift键盘交互
展示模式：默认、分隔符、自定义
```
delimiterChar
```
和
```
mode
```
配置
```
allowFiltering
```
与筛选栏实现
筛选类型：StartsWith、EndsWith、Contains
```
filterBarPlaceholder
```
自定义
```
ignoreCase
```
和
```
ignoreAccent
```
选项

Tree Settings & Configuration

树形设置与配置

📄 Read: references/tree-settings.md

```
loadOnDemand
```
for lazy loading implementation
```
autoCheck
```
for hierarchical checkbox synchronization
```
expandOn
```
behavior (Auto, Click, DblClick, None)
```
checkDisabledChildren
```
for disabled node handling
Tree expansion and collapse control

📄 阅读：references/tree-settings.md

用于实现懒加载的
```
loadOnDemand
```
用于层级复选框同步的
```
autoCheck
```
```
expandOn
```
行为（Auto、Click、DblClick、None）
针对禁用节点的
```
checkDisabledChildren
```
树形展开与折叠控制

Field Mapping & Custom Data Structures

字段映射与自定义数据结构

📄 Read: references/field-mapping.md

Core fields: value, text, dataSource, child, parentValue
Node state fields: expanded, hasChildren, selected, selectable
Display enhancement fields: iconCss, imageUrl, htmlAttributes
Query and tableName for remote data
Nested field mapping for hierarchical data

📄 阅读：references/field-mapping.md

核心字段：value、text、dataSource、child、parentValue
节点状态字段：expanded、hasChildren、selected、selectable
展示增强字段：iconCss、imageUrl、htmlAttributes
远程数据的Query和tableName
层级数据的嵌套字段映射

Advanced Features & API Reference

高级功能与API参考

📄 Read: references/advanced-features.md

Properties (60+ properties with descriptions and examples)
Methods (getSelectedNodes, getCheckedNodes, setCheckedNodes, etc.)
Events (change, select, dataBound, filtering, beforeOpen, focus, keyPress, popup)
Event arguments (EventArgs structures with property descriptions)
Styling and CSS customization
Performance optimization techniques

📄 阅读：references/advanced-features.md

属性（60+个带描述和示例的属性）
方法（getSelectedNodes、getCheckedNodes、setCheckedNodes等）
事件（change、select、dataBound、filtering、beforeOpen、focus、keyPress、popup）
事件参数（带属性描述的EventArgs结构）
样式与CSS自定义
性能优化技巧

Accessibility & Localization

无障碍访问与本地化

📄 Read: references/accessibility-localization.md

WCAG 2.2 and Section 508 compliance standards
WAI-ARIA attributes and roles (listbox, treeitem, checkbox, group, etc.)
Keyboard navigation shortcuts (Alt+Down, Arrow keys, Enter, Space, etc.)
Screen reader and assistive technology support
Localization keys (noRecordsTemplate, actionFailureTemplate, overflowCountTemplate, totalCountTemplate)
Culture customization with locale property
RTL (Right-to-Left) language support with enableRtl

📄 阅读：references/accessibility-localization.md

WCAG 2.2和Section 508合规标准
WAI-ARIA属性与角色（listbox、treeitem、checkbox、group等）
键盘导航快捷键（Alt+Down、方向键、Enter、Space等）
屏幕阅读器与辅助技术支持
本地化键（noRecordsTemplate、actionFailureTemplate、overflowCountTemplate、totalCountTemplate）
结合locale属性的文化自定义
通过enableRtl实现RTL（右到左）语言支持

Quick Start

快速开始

Basic Dropdown Tree with Hierarchical Data

带层级数据的基础Dropdown Tree

jsx

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import '@syncfusion/ej2-dropdowns/styles/material.css';

function App() {
  const data = [
    { id: '1', name: 'Electronics', expanded: true },
    { id: '2', name: 'Laptops', parentId: '1' },
    { id: '3', name: 'Phones', parentId: '1' },
    { id: '4', name: 'Appliances' },
  ];

  return (
    <DropDownTreeComponent
      id="dropdowntree"
      fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
      placeholder="Select an item"
    />
  );
}

export default App;

jsx

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import '@syncfusion/ej2-dropdowns/styles/material.css';

function App() {
  const data = [
    { id: '1', name: 'Electronics', expanded: true },
    { id: '2', name: 'Laptops', parentId: '1' },
    { id: '3', name: 'Phones', parentId: '1' },
    { id: '4', name: 'Appliances' },
  ];

  return (
    <DropDownTreeComponent
      id="dropdowntree"
      fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
      placeholder="Select an item"
    />
  );
}

export default App;

With Checkboxes and Auto-Check

带复选框与自动勾选的Dropdown Tree

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
  showCheckBox={true}
  showSelectAll={true}
  treeSettings={{ autoCheck: true }}
  placeholder="Select items"
/>

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
  showCheckBox={true}
  showSelectAll={true}
  treeSettings={{ autoCheck: true }}
  placeholder="Select items"
/>

With Filtering

带筛选功能的Dropdown Tree

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId' }}
  allowFiltering={true}
  filterType="Contains"
  filterBarPlaceholder="Search items..."
  placeholder="Select an item"
/>

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId' }}
  allowFiltering={true}
  filterType="Contains"
  filterBarPlaceholder="Search items..."
  placeholder="Select an item"
/>

With Custom Templates

带自定义模板的Dropdown Tree

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId' }}
  itemTemplate={(props) => (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <span>{props.name}</span>
      <small style={{ color: '#999' }}>({props.category})</small>
    </div>
  )}
  valueTemplate={(props) => <span>{props.name}</span>}
  placeholder="Select item"
/>

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId' }}
  itemTemplate={(props) => (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <span>{props.name}</span>
      <small style={{ color: '#999' }}>({props.category})</small>
    </div>
  )}
  valueTemplate={(props) => <span>{props.name}</span>}
  placeholder="Select item"
/>

Common Patterns

常见模式

Pattern 1: Self-Referential Data Binding

模式1：自引用数据绑定

For flat data structures with parent references:

jsx

const data = [
  { id: 1, name: 'Discover Music', hasChild: true, expanded: true },
  { id: 2, pid: 1, name: 'Hot Singles' },
  { id: 3, pid: 1, name: 'Rising Artists' },
  { id: 7, name: 'Sales and Events', hasChild: true },
  { id: 8, pid: 7, name: '100 Albums' },
];

<DropDownTreeComponent
  id="dropdowntree"
  fields={{
    dataSource: data,
    value: 'id',
    text: 'name',
    parentValue: 'pid',
    hasChildren: 'hasChild',
  }}
/>

针对带有父引用的扁平数据结构：

jsx

const data = [
  { id: 1, name: 'Discover Music', hasChild: true, expanded: true },
  { id: 2, pid: 1, name: 'Hot Singles' },
  { id: 3, pid: 1, name: 'Rising Artists' },
  { id: 7, name: 'Sales and Events', hasChild: true },
  { id: 8, pid: 7, name: '100 Albums' },
];

<DropDownTreeComponent
  id="dropdowntree"
  fields={{
    dataSource: data,
    value: 'id',
    text: 'name',
    parentValue: 'pid',
    hasChildren: 'hasChild',
  }}
/>

Pattern 2: Event Handling for Selection Changes

模式2：选择变更的事件处理

jsx

const handleChange = (args) => {
  console.log('Old values:', args.oldValue); // string[]
  console.log('New values:', args.value); // string[]
  console.log('User interaction:', args.isInteracted); // boolean
};

const handleSelect = (args) => {
  console.log('Action:', args.action); // 'select' or 'unselect'
  console.log('Item data:', args.itemData); // object
};

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  onChange={handleChange}
  onSelect={handleSelect}
/>

jsx

const handleChange = (args) => {
  console.log('Old values:', args.oldValue); // string[]
  console.log('New values:', args.value); // string[]
  console.log('User interaction:', args.isInteracted); // boolean
};

const handleSelect = (args) => {
  console.log('Action:', args.action); // 'select' or 'unselect'
  console.log('Item data:', args.itemData); // object
};

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  onChange={handleChange}
  onSelect={handleSelect}
/>

Pattern 3: Multi-Select with Auto-Check

模式3：带自动勾选的多选

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  showCheckBox={true}
  treeSettings={{ autoCheck: true }}
  mode="Default"
  delimiterChar=", "
  placeholder="Select multiple items"
/>

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  showCheckBox={true}
  treeSettings={{ autoCheck: true }}
  mode="Default"
  delimiterChar=", "
  placeholder="Select multiple items"
/>

Pattern 4: Lazy Loading for Large Datasets

模式4：针对大型数据集的懒加载

jsx

const remoteData = new DataManager({
  url: 'https://your-api.com/data',
  adaptor: new UrlAdaptor(),
});

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: remoteData, value: 'id', text: 'name', hasChildren: 'hasChild' }}
  treeSettings={{ loadOnDemand: true }}
  placeholder="Loading..."
/>

jsx

const remoteData = new DataManager({
  url: 'https://your-api.com/data',
  adaptor: new UrlAdaptor(),
});

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: remoteData, value: 'id', text: 'name', hasChildren: 'hasChild' }}
  treeSettings={{ loadOnDemand: true }}
  placeholder="Loading..."
/>

Pattern 5: Custom Item Styling with IconCss

模式5：使用IconCss自定义项样式

jsx

const data = [
  { id: 1, name: 'Documents', iconCss: 'e-folder', hasChild: true },
  { id: 2, pid: 1, name: 'Resume.pdf', iconCss: 'e-pdf' },
  { id: 3, pid: 1, name: 'Report.docx', iconCss: 'e-docx' },
];

<DropDownTreeComponent
  id="dropdowntree"
  fields={{
    dataSource: data,
    value: 'id',
    text: 'name',
    iconCss: 'iconCss',
    parentValue: 'pid',
    hasChildren: 'hasChild',
  }}
/>

jsx

const data = [
  { id: 1, name: 'Documents', iconCss: 'e-folder', hasChild: true },
  { id: 2, pid: 1, name: 'Resume.pdf', iconCss: 'e-pdf' },
  { id: 3, pid: 1, name: 'Report.docx', iconCss: 'e-docx' },
];

<DropDownTreeComponent
  id="dropdowntree"
  fields={{
    dataSource: data,
    value: 'id',
    text: 'name',
    iconCss: 'iconCss',
    parentValue: 'pid',
    hasChildren: 'hasChild',
  }}
/>

Pattern 6: RTL & Localization Support

模式6：RTL与本地化支持

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  enableRtl={true}
  locale="ar"
  placeholder="اختر عنصرا"
/>

jsx

<DropDownTreeComponent
  id="dropdowntree"
  fields={fields}
  enableRtl={true}
  locale="ar"
  placeholder="اختر عنصرا"
/>

Key Props Overview

关键属性概述

Property	Type	Description
Core
`id`	string	Unique identifier for the component
`fields`	FieldsModel	Data source and field mapping configuration
`placeholder`	string	Input placeholder text
`enabled`	boolean	Enable/disable component (default: true)
Selection
`showCheckBox`	boolean	Enable checkbox multi-selection (default: false)
`showSelectAll`	boolean	Show Select All checkbox (default: false)
`selectAllText`	string	"Select All" label text
`unSelectAllText`	string	"Unselect All" label text
`allowMultiSelection`	boolean	Enable multi-selection with Ctrl/Shift keys
Templates
`itemTemplate`	string \| Function	Custom item rendering
`valueTemplate`	string \| Function	Custom selected value display
`headerTemplate`	string \| Function	Custom header content
`footerTemplate`	string \| Function	Custom footer content
`noRecordsTemplate`	string \| Function	Empty state template
`actionFailureTemplate`	string \| Function	Error state template
Filtering
`allowFiltering`	boolean	Enable search/filter bar (default: false)
`filterType`	TreeFilterType	Filter type: StartsWith, EndsWith, Contains
`filterBarPlaceholder`	string	Filter bar placeholder text
`ignoreCase`	boolean	Case-insensitive filtering (default: true)
`ignoreAccent`	boolean	Ignore diacritics in filtering
Tree Settings
`treeSettings`	TreeSettingsModel	Tree behavior configuration (autoCheck, loadOnDemand, expandOn)
Display
`mode`	string	Display mode: Default, Delimiter, Custom
`delimiterChar`	string	Delimiter for multi-select (default: ", ")
`customTemplate`	string	Custom multi-select display template
Localization & RTL
`locale`	string	Culture code (default: "en")
`enableRtl`	boolean	Enable Right-to-Left layout
`enablePersistence`	boolean	Persist state between page reloads
Styling
`cssClass`	string	CSS class for root and popup
`width`	string \| number	Component width
`popupHeight`	string \| number	Popup height
`htmlAttributes`	object	HTML attributes for the component

属性	类型	描述
核心
`id`	string	组件的唯一标识符
`fields`	FieldsModel	数据源与字段映射配置
`placeholder`	string	输入框占位文本
`enabled`	boolean	启用/禁用组件（默认：true）
选择
`showCheckBox`	boolean	启用复选框多选（默认：false）
`showSelectAll`	boolean	显示全选复选框（默认：false）
`selectAllText`	string	"全选"标签文本
`unSelectAllText`	string	"取消全选"标签文本
`allowMultiSelection`	boolean	启用Ctrl/Shift键盘多选
模板
`itemTemplate`	string \| Function	自定义项渲染
`valueTemplate`	string \| Function	自定义选中值展示
`headerTemplate`	string \| Function	自定义页眉内容
`footerTemplate`	string \| Function	自定义页脚内容
`noRecordsTemplate`	string \| Function	空状态模板
`actionFailureTemplate`	string \| Function	错误状态模板
筛选
`allowFiltering`	boolean	启用搜索/筛选栏（默认：false）
`filterType`	TreeFilterType	筛选类型：StartsWith、EndsWith、Contains
`filterBarPlaceholder`	string	筛选栏占位文本
`ignoreCase`	boolean	大小写不敏感筛选（默认：true）
`ignoreAccent`	boolean	筛选时忽略变音符号
树形设置
`treeSettings`	TreeSettingsModel	树形行为配置（autoCheck、loadOnDemand、expandOn）
展示
`mode`	string	展示模式：Default、Delimiter、Custom
`delimiterChar`	string	多选分隔符（默认：", "）
`customTemplate`	string	自定义多选展示模板
本地化与RTL
`locale`	string	文化代码（默认："en"）
`enableRtl`	boolean	启用右到左布局
`enablePersistence`	boolean	页面刷新后保持状态
样式
`cssClass`	string	根元素和弹出层的CSS类
`width`	string \| number	组件宽度
`popupHeight`	string \| number	弹出层高度
`htmlAttributes`	object	组件的HTML属性

Decision Guide

决策指南

Choosing Data Binding:

Local hierarchical - Nested JSON objects with
```
child
```
property for small-to-medium datasets
Local self-referential - Flat arrays with
```
parentValue
```
field for structured data
Remote with DataManager - OData/Web API for large datasets, dynamic loading, real-time data

Choosing Selection Mode:

Single select - Default (no checkboxes, no multi-select), read-only visual selection
Checkboxes -
```
showCheckBox={true}
```
for explicit multi-selection
Multi-select -
```
allowMultiSelection={true}
```
for Ctrl/Shift keyboard selection
Auto-check - Combine checkboxes with
```
treeSettings={{ autoCheck: true }}
```
for hierarchy sync

Choosing Template:

itemTemplate - Custom formatting per tree item (name + description, icons, badges)
valueTemplate - Custom display in input field (combined text, formatted values)
headerTemplate - Static controls above list (instructions, search help, custom controls)
footerTemplate - Static content below list (count summary, action buttons)
noRecordsTemplate - Empty state when no data or search yields no results
actionFailureTemplate - Error message when data fetch fails

When to Use Lazy Loading:

Large datasets (1000+ items)
Performance-critical applications
Data fetched from remote API with pagination
Hierarchies with many levels

When to Use Filtering:

Large datasets requiring search
User-friendly discovery of items
Reducing cognitive load for selection

选择数据绑定方式：

本地层级数据 - 带有
```
child
```
属性的嵌套JSON对象，适用于中小型数据集
本地自引用数据 - 带有
```
parentValue
```
字段的扁平数组，适用于结构化数据
结合DataManager的远程数据 - OData/Web API，适用于大型数据集、动态加载、实时数据

选择选择模式：

单选 - 默认模式（无复选框，无多选），仅视觉选择
复选框 - 设置
```
showCheckBox={true}
```
，用于明确的多选
多选 - 设置
```
allowMultiSelection={true}
```
，支持Ctrl/Shift键盘选择
自动勾选 - 结合复选框与
```
treeSettings={{ autoCheck: true }}
```
，实现层级同步

选择模板：

itemTemplate - 自定义每个树形项的格式（名称+描述、图标、徽章）
valueTemplate - 自定义输入框中的展示内容（组合文本、格式化值）
headerTemplate - 列表上方的静态控件（说明、搜索帮助、自定义控件）
footerTemplate - 列表下方的静态内容（数量汇总、操作按钮）
noRecordsTemplate - 无数据或搜索无结果时的空状态
actionFailureTemplate - 数据获取失败时的错误提示

何时使用懒加载：

大型数据集（1000+项）
性能敏感型应用
从远程API分页获取数据
包含多级层级的结构

何时使用筛选：

需要搜索功能的大型数据集
提升用户查找项的体验
降低选择操作的认知负荷

Next Steps

下一步

Get started → Read getting-started.md
Bind data → Read data-binding.md
Add checkboxes → Read checkbox-selection.md
Enable filtering → Read multi-selection-filtering.md
Configure trees → Read tree-settings.md
Map fields → Read field-mapping.md
Customize → Read templates.md
Access APIs → Read advanced-features.md
Enhance UX → Read accessibility-localization.md

快速入门 → 阅读getting-started.md
绑定数据 → 阅读data-binding.md
添加复选框 → 阅读checkbox-selection.md
启用筛选 → 阅读multi-selection-filtering.md
配置树形设置 → 阅读tree-settings.md
字段映射 → 阅读field-mapping.md
自定义 → 阅读templates.md
查阅API → 阅读advanced-features.md
提升用户体验 → 阅读accessibility-localization.md