syncfusion-angular-dropdowntree

用途

Syncfusion Angular Dropdown Tree 组件用于在树形层级数据中选择单个或多个值。它以紧凑的下拉输入框呈现，展开后显示完整的树结构，并保持数据的父子层级关系，便于在多层数据中直观导航。适用于分类选择、组织架构、文件层级等嵌套数据结构的展示与选择。

主要能力

单选或多选：支持选择单个或多个条目。
复选框多选：通过 showCheckBox 属性启用复选框，实现不干扰下拉界面的多选。
自动勾选（父子联动）：通过 treeSettings 的 autoCheck 实现勾选父节点自动勾选子节点、取消最后一个子节点时取消父节点，并支持部分选中的中间状态。
全选功能：通过 showSelectAll 启用，可用 selectAllText 与 unSelectAllText 自定义标签。
数据绑定：支持本地层级数据（嵌套数组）、自引用数据（扁平数组配合 parentValue）、以及通过 DataManager 绑定远程数据（OData、ODataV4、WebAPI 适配器），并支持基于 Query 的过滤。
模板与自定义：支持项模板（itemTemplate）、值模板、页眉与页脚模板、无记录模板、操作失败模板，以及多选下的自定义显示模板。
无障碍：内置键盘导航与 ARIA 属性，支持屏幕阅读器。
本地化：支持多语言与区域格式，可自定义 locale 相关字符串。
方法与事件：提供 showPopup()、hidePopup()、refresh()、clearSelection()、expandAll()、collapseAll() 等方法；提供 change、select、open、close、beforeOpen、dataBound、actionFailure、filtering、created、destroyed、focus、blur、keyPress 等事件。

使用方式

安装依赖并配置 Angular CLI，注册模块 @syncfusion/ej2-angular-dropdowns，导入 CSS 与主题。
在组件模板中使用 <ejs-dropdowntree> 标签，通过 [fields] 绑定数据源与字段映射（value、text、child 或 parentValue、hasChildren 等）。
按需启用复选框（[showCheckBox]='true'）、自动勾选（[treeSettings]='{ autoCheck: true }'）、全选（[showSelectAll]='true'）等属性。
远程数据场景下，使用 DataManager 配置 url、adaptor（如 ODataV4Adaptor）与 crossDomain，并通过 Query 指定 from、select、take 等。
通过 itemTemplate 等模板属性自定义条目显示内容。

最小示例（层级数据）：

import { Component } from '@angular/core';
import { DropDownTreeModule } from '@syncfusion/ej2-angular-dropdowns';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-dropdown-tree',
  template: `<ejs-dropdowntree id='dropdowntree' 
                [fields]='fields' 
                placeholder='Select a category'></ejs-dropdowntree>`,
  standalone: true,
  imports: [DropDownTreeModule, FormsModule, ReactiveFormsModule]
})
export class AppComponent {
  public data = [
    {
      nodeId: '01', nodeText: 'Music',
      nodeChild: [
        { nodeId: '01-01', nodeText: 'Gouttes.mp3' }
      ]
    },
    {
      nodeId: '02', nodeText: 'Videos', expanded: true,
      nodeChild: [
        { nodeId: '02-01', nodeText: 'Naturals.mp4' },
        { nodeId: '02-02', nodeText: 'Wild.mpeg' }
      ]
    }
  ];

  public fields = { 
    dataSource: this.data, 
    value: 'nodeId', 
    text: 'nodeText', 
    child: 'nodeChild' 
  };
}

复选框多选示例：

@Component({
  template: `<ejs-dropdowntree id='dropdowntree' 
                [fields]='fields' 
                [showCheckBox]='true' 
                [showSelectAll]='true'
                selectAllText='Check All' 
                unSelectAllText='Uncheck All'></ejs-dropdowntree>`,
  standalone: true,
  imports: [DropDownTreeModule, FormsModule, ReactiveFormsModule]
})
export class CheckboxExample {
  public data = [
    { id: 1, name: 'Music', hasChild: true, expanded: true },
    { id: 2, pid: 1, name: 'Hot Singles' },
    { id: 3, pid: 1, name: 'Rising Artists' }
  ];
  public fields = { 
    dataSource: this.data, 
    value: 'id', 
    text: 'name', 
    parentValue: 'pid', 
    hasChildren: 'hasChild' 
  };
}

远程数据示例：

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

@Component({
  template: `<ejs-dropdowntree [fields]='fields'></ejs-dropdowntree>`
})
export class RemoteDataExample {
  public data = new DataManager({
    url: 'url',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
  });
  
  public fields = {
    dataSource: this.data,
    query: new Query().from('Employees').select('EmployeeID,FirstName').take(5),
    value: 'EmployeeID',
    text: 'FirstName',
    hasChildren: 'EmployeeID'
  };
}

适用场景

层级选择：从嵌套的树形数据中选择（分类、文件层级、组织树）。
多选：基于复选框选择多个条目，并可选启用父子联动。
动态数据：绑定本地数组、自引用结构或远程 OData/REST 端点。
自定义显示：使用项模板、值模板、页眉页脚实现丰富的界面定制。
大数据集：通过远程数据与延迟加载优化性能。
本地化：适配不同文化与语言的组件文本与消息。

限制

资料未提供具体的收费、价格、平台兼容版本、性能指标或效果承诺等信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制