ツリー

ツリーは、階層データを表示するために使用されます。

インポート#


import { Tree } from 'primereact/tree';
         

基本#

ツリーは、TreeNodeインスタンスのコレクションを値として必要とします。

  • 利用可能なオプションはありません

<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に設定することで、複数のノードを選択できます。複数選択モードでは、デフォルトでmetaキーを押す（例：⌘）必要がありますが、metaKeySelectionプロパティを無効にすることで構成できます。タッチ対応デバイスでは、ツリーは常にmetaキーを無視することに注意してください。

複数選択モードでは、値のバインディングは、キーがノードキーで、値が選択状態を示すブール値であるキーバリューペアである必要があります。


{
    '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プロパティを追加することで有効になります。デフォルトでは、ノードのラベルプロパティがテキストフィールドの値と比較されます。検索中に使用するフィールドをカスタマイズするには、 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-selectedの代わりにaria-checkedが使用されます。ツリーノードのコンテナ要素にはgroupロールがあります。チェックボックスとトグルアイコンは、スクリーンリーダーから非表示になっています。代わりに、treeitemロールと属性を持つ親要素が、リーダーとキーボードサポートに使用されます。aria-setsize、aria-posinset、aria-level属性は暗黙的に計算され、各treeitemに追加されます。

キーボードサポート

キー機能
tabフォーカスがコンポーネントに入ると、最初に選択されたノードにフォーカスを移動します。選択されていない場合は、最初の要素にフォーカスが移動します。フォーカスが既にコンポーネント内にある場合は、ページタブシーケンスの次のフォーカス可能な要素にフォーカスを移動します。
shift + tabフォーカスがコンポーネントに入ると、最後に選択されたノードにフォーカスを移動します。選択されていない場合は、最初の要素にフォーカスが移動します。フォーカスが既にコンポーネント内にある場合は、ページタブシーケンスの前のフォーカス可能な要素にフォーカスを移動します。
enterフォーカスされているツリーノードを選択します。
spaceフォーカスされているツリーノードを選択します。
下矢印フォーカスを次のツリーノードに移動します。
上矢印フォーカスを前のツリーノードに移動します。
右矢印ノードが閉じている場合はノードを開き、開いている場合は最初のノードにフォーカスを移動します。
左矢印ノードが開いている場合はノードを閉じ、閉じている場合は親ノードにフォーカスを移動します。
                            PrimeReact 10.8.3 by PrimeTek