树

树用于显示分层数据。

导入#


import { Tree } from 'primereact/tree';
         

基本#

树需要一个 TreeNode 实例集合作为 value。

  • 没有可用选项

<Tree value={nodes} className="w-full md:w-30rem" />
         

受控#

节点的展开状态通过 expandedKeys 和 onToggle 属性以编程方式管理。

  • 没有可用选项

<div className="flex flex-wrap gap-2 mb-4">
    <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} />
    <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
</div>

<Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />
         

选择#

单选#

通过将 selectionMode 设置为 single 以及 selectionKeys 和 onSelectionChange 属性来管理选择值绑定，从而配置单个节点选择。

  • 没有可用选项

<Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} 
    onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />
         

多选#

通过将 selectionMode 设置为 multiple，可以选择多个节点。默认情况下，在多选模式下，需要按住 metaKey（例如⌘）才能添加到现有选择中，但是可以通过禁用 metaKeySelection 属性来配置此行为。请注意，在启用触摸的设备中，树始终忽略 metaKey。

在多选模式下，值绑定应为键值对，其中键是节点键，值是一个布尔值，指示是否选择。


{
    '0-0': true,
    '0-1-0': true
}
         
  • 没有可用选项

<div className="flex align-items-center mb-4 gap-2">
    <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
    <label htmlFor="input-metakey">MetaKey</label>
</div>
<Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} 
    onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
         

复选框#

通过将 selectionMode 配置为 checkbox，可以启用通过复选框选择多个节点。

在复选框选择模式下，值绑定应为键值对，其中键是节点键，值是一个具有 checked 和 partialChecked 属性的对象，用于表示节点的选中状态。


{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}
         
  • 没有可用选项

<Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} 
    onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
         

事件#

为每种用户交互类型（例如展开、折叠和选择）提供一个事件。

  • 没有可用选项

<Toast ref={toast} />
<Tree value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} 
    onExpand={onExpand} onCollapse={onCollapse} onSelect={onSelect} onUnselect={onUnselect} className="w-full md:w-30rem" />
         

懒加载#

在处理大型数据集时，懒加载非常有用，在此示例中，使用 onExpand 事件按需动态加载节点。

  • 没有可用选项

<Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />
         

模板#

使用 nodeTemplate 属性定义自定义节点内容，而不是节点标签。可以使用 togglerTemplate 属性自定义切换器。

  • 安装
  • 主要概念

<Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />
         

拖放#

可以使用 dragdropScope 和 onDragDrop 属性通过拖放重新排序节点。 dragdropScope 定义组件的唯一范围，以便其他拖动事件不会干扰组件，而 onDragDrop 是一个回调，用于在放置后更新新状态。

  • 没有可用选项

<Tree value={nodes} dragdropScope="demo" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
         

上下文菜单#

树使用 contextMenuSelectionKey、onContextMenuSelectionChange 和 onContextMenu 属性与 上下文菜单 进行独占集成。

  • 没有可用选项

<Toast ref={toast} />

<ContextMenu model={menu} ref={cm} />

<Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} 
    contextMenuSelectionKey={selectedNodeKey} onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)} 
    onContextMenu={(e) => cm.current.show(e.originalEvent)} className="w-full md:w-30rem" />
         

过滤#

通过添加 filter 属性启用过滤，默认情况下，节点的 label 属性用于与文本字段中的值进行比较，为了自定义搜索期间应使用哪些字段，请定义 filterBy 属性。此外，filterMode 指定过滤策略。在 lenient 模式下，当查询与节点匹配时，不会进一步搜索该节点的子节点，因为包含该节点的所有后代。另一方面，在 strict 模式下，当查询与节点匹配时，过滤将继续对所有后代进行。

  • 没有可用选项
  • 没有可用选项

<Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />
<Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />
         

可访问性#

屏幕阅读器

描述组件的值可以使用 aria-labelledby 或 aria-label 属性提供。根列表元素具有 tree 角色，而每个列表项都具有 treeitem 角色以及 aria-label、aria-selected 和 aria-expanded 属性。在复选框选择中，使用 aria-checked 代替 aria-selected。树节点的容器元素具有 group 角色。复选框和切换图标对屏幕阅读器隐藏，因为使用带有 treeitem 角色和属性的父元素来支持阅读器和键盘。 aria-setsize、aria-posinset 和 aria-level 属性是隐式计算的，并添加到每个 treeitem。

键盘支持

按键功能
tab当焦点进入组件时，将焦点移动到第一个选定的节点，如果没有选定的节点，则第一个元素将获得焦点。如果焦点已经在组件内部，则将焦点移动到页面标签序列中的下一个可聚焦元素。
shift + tab当焦点进入组件时，将焦点移动到最后一个选定的节点，如果没有选定的节点，则第一个元素将获得焦点。如果焦点已经在组件内部，则将焦点移动到页面标签序列中的上一个可聚焦元素。
enter选择焦点所在的树节点。
space选择焦点所在的树节点。
向下箭头将焦点移动到下一个树节点。
向上箭头将焦点移动到上一个树节点。
向右箭头如果节点已关闭，则打开该节点，否则将焦点移动到第一个子节点。
向左箭头如果节点已打开，则关闭该节点，否则将焦点移动到父节点。
                            PrimeReact 10.9.1 由 PrimeTek 提供