syncfusion-javascript-dropdowntree

用途

Syncfusion Dropdown Tree 控件用于在下拉框内以树形结构展示层级数据，允许用户从中选择单个或多个值。该技能适用于需要在紧凑的下拉界面中呈现父子层级关系的场景，例如组织架构、分类选择、地区/区域选择器以及权限/角色管理界面。

主要能力

• 数据绑定：支持本地数据（层级结构或自引用结构）与远程数据（OData、Web API、DataManager）。
• 复选框：支持多选，并可配置父子自动勾选行为。
• 全选：弹出层头部内置复选框，可一键全选或取消全选。
• 模板：可自定义列表项、选中值、头部、底部以及无记录内容。
• 懒加载：按需加载子级数据，减少初始带宽占用。
• 排序：按升序或降序显示条目。
• 筛选：动态搜索和过滤树节点。
• 本地化：支持多语言与文本自定义。
• 无障碍：支持键盘导航与屏幕阅读器。
• 多选显示模式：Box、Delimiter、Default 或 Custom。

使用方式

通过 npm 包 @syncfusion/ej2-dropdowns 引入 DropDownTree 类，在 HTML 中准备一个 input 元素，然后实例化并调用 appendTo 挂载。核心配置包括：

• fields（FieldsModel）：映射数据源字段，如 dataSource、value、text、child、parentValue、hasChildren、expanded、selected、iconCss、imageUrl、htmlAttributes、tooltip、selectable、query、tableName。
• treeSettings（TreeSettingsModel）：配置树行为，如 loadOnDemand（懒加载）、autoCheck（父子联动勾选）、checkDisabledChildren（是否勾选禁用子项）、expandOn（展开触发方式：Auto、Click、DblClick、None）。

基础示例（TypeScript）：

import { DropDownTree } from '@syncfusion/ej2-dropdowns';

let continents = [
    {
        code: 'AF',
        name: 'Africa',
        countries: [
            { code: 'NGA', name: 'Nigeria' },
            { code: 'EGY', name: 'Egypt' }
        ]
    },
    {
        code: 'AS',
        name: 'Asia',
        expanded: true,
        countries: [
            { code: 'IND', name: 'India', selected: true },
            { code: 'JPN', name: 'Japan' }
        ]
    }
];

let ddtree = new DropDownTree({
    fields: {
        dataSource: continents,
        value: 'code',
        text: 'name',
        child: 'countries'
    }
});

ddtree.appendTo('#ddtElement');

HTML：

<input type="text" id="ddtElement" />

常见模式

1. 复选框多选：设置 showCheckBox: true、showSelectAll: true、treeSettings: { autoCheck: true }，并通过 change 事件获取选中值。
2. 大数据集按需加载：设置 treeSettings: { loadOnDemand: true }，适用于 1000 条以上的层级数据。
3. 模板自定义显示：使用 itemTemplate 与 valueTemplate 展示额外字段。
4. 远程数据与筛选：结合 DataManager、ODataV4Adaptor，并设置 allowFiltering、filterBarPlaceholder、filterType。
5. 自定义全选与分隔符模式：设置 selectAllText、unSelectAllText、mode: 'Delimiter'、delimiterChar、allowMultiSelection。
6. 动态更新数据：修改 ddtree.fields.dataSource 后调用 ddtree.refresh() 重新渲染。
7. 编程式设值与校验：在 change 事件中检查 args.value，超出限制时回退到 args.oldValue。

适用场景

• 组织架构导航：部门/员工多选与角色分配，结合 hasChildren、parentValue 与 autoCheck。
• 地理区域选择：国家 → 州 → 城市，结合远程数据与懒加载。
• 分类产品筛选：展示分类及数量、图标，使用 itemTemplate 自定义渲染。

限制

资料未提供该控件的收费、价格、平台兼容性、性能指标或具体版本要求等信息，暂未提供。使用前请参考官方文档确认依赖与主题配置。