Tree

Properties

Property	Type	Default	Description
items	Array<object>		표시할 아이템의 배열입니다.
labelField	string	'label'	아이템의 라벨로 사용할 필드 이름입니다.
rowCount	number	0	한 번에 표시할 최대 아이템 개수입니다.
scrollTarget	string|HTMLElement		외부 스크롤 요소를 지정합니다. 부모 노드만 가능합니다.
draggable	boolean	false	트리 아이템이 드래그 가능한지 여부를 나타냅니다.
droppable	boolean	false	트리에 다른 아이템을 드롭할 수 있는지 여부를 나타냅니다.
hookDragMessage	(data: TreeItemDragEventData) => string		아이템 드래그 시 표시할 메시지를 반환하는 함수를 정의합니다.
childrenField	number	'children'	트리 구조에서 아이템의 자식 목록을 포함하는 필드의 이름을 정의합니다.
autoExpandLevel	number	0	items가 갱신될 때 자동으로 확장될 아이템의 레벨을 지정합니다. 예를 들어, 이 속성의 값이 2인 경우, items가 갱신될 때 2번째 레벨까지 모든 아이템이 자동으로 확장됩니다.
allowMultiple	boolean	false	사용자가 여러 항목을 선택할 수 있는지 여부입니다.
requireSelection	boolean	false	적어도 하나의 아이템이 항상 선택되어야 하는 여부입니다.
valueField	string		선택된 아이템의 값을 결정하는 필드의 이름입니다.
selectedItem	object		선택된 아이템을 정의합니다.
selectedItems	Array<object>		복수 선택된 아이템을 정의합니다.
selectedValue	Array<string>		선택된 아이템의 valueField 속성 값을 정의합니다.

Methods

Method	Parameters	Return Value	Description
scrollToItem	item: object	void	해당 아이템 위치로 스크롤합니다. 이미 표시된 경우 스크롤되지 않습니다.
invalidate		void	표시 목록의 갱신을 요청합니다.
flush		void	대기 중인 표시 목록 갱신을 즉시 실행합니다.
getParentNode	node: object	object	지정된 노드의 부모 노드를 반환합니다.
getAncestorNodes	node: object	Array<object>	해당 노드의 조상 노드 목록을 반환합니다.
getDescendantNodes	node: object	Array<object>	해당 노드의 후손 노드 목록을 반환합니다. null 이면 전체 노드를 반환합니다.
getSiblingNodes	node: object	Array<object>	해당 노드의 형제 노드들을 반환합니다.
getChildren	node: object	Array<object>	지정된 노드의 자식 노드 목록을 반환합니다.
hasChildren	node: object	boolean	해당 노드에 자식이 있는지 여부를 반환합니다.
addNode	parent: object, node: object	boolean	부모 노드에 자식 노드를 추가합니다. 부모 노드가 null이면 최상위 목록에 추가합니다.
addNodeAt	parent: object, node: object, index: number	boolean	부모 노드에 자식 노드를 지정된 인덱스 위치에 추가합니다.
addNodes	parent: object, nodes: Array<object>	boolean	부모 노드에 여러 자식 노드를 추가합니다. 부모 노드가 null이면 최상위 목록에 추가합니다.
addNodesAt	parent: object, nodes: Array<object>, index: number	boolean	부모 노드에 여러 자식 노드를 지정된 인덱스 위치에 추가합니다.
removeNode	node: object	boolean	부모 노드에서 자식 노드를 삭제합니다.
contains	node: object	boolean	해당 노드가 트리에 포함되어 있는지 확인하고, 포함되면 true를 반환합니다.
isExpandedNode	node: object	boolean	해당 노드가 확장되어 있는지 여부를 반환합니다.
expandNode	node: object	boolean	지정된 노드를 확장합니다.
expandAll		void	트리의 모든 노드를 확장합니다.
collapseNode	node: object	boolean	지정된 노드를 축소합니다.
collapseAll		void	트리의 모든 노드를 축소합니다.
toggleNode	node: object	void	주어진 노드의 확장 상태를 확장 또는 축소합니다.
setExpandedNodes	nodes: Array<object>	void	확장된 노드 목록을 설정합니다.
getExpandedNodes		Array<object>	확장된 노드 목록을 반환합니다.
getNodeLevel	node: object	number	지정된 노드의 레벨을 반환합니다.
isBranchNode	node: object	boolean	해당 노드가 자식 노드를 가진 가지 노드인지 확인합니다.
isLeafNode	node: object	boolean	주어진 노드가 자식 노드를 가지지 않는 마지막 노드인지 확인합니다.
find	callback: HierarchyFindFn<object>, prefetchNode?: object, postOrder?: boolean	Array<object>	트리의 모든 노드를 탐색하여 지정된 함수에서 true를 반환하는 모든 항목을 반환합니다.
findOne	callback: HierarchyFindFn<object>, prefetchNode?: object, postOrder?: boolean	object	트리의 모든 노드를 탐색하여 처음으로 true를 반환하는 항목을 반환하고 탐색을 중지합니다.

Events

Event	Type	Description
collection-change	(event: ArrayListEvent<T>) => void	컬렉션 내부의 아이템이 변경되었을 때 발생합니다. (set, add, remove, move, update, reset, refresh)
caret-change	(event: CustomEvent<{value: number; oldValue: number}>) => void	커서 인덱스가 변경되었을 때 발생합니다.
scroll	(event: CustomEvent<{oldLeft: number; oldTop: number; scrollLeft: number; scrollTop: number; trigger: Event}>) => void	스크롤이 변경되었을 때 발생합니다.
item-down	(event: ItemEvent<T>) => void	아이템에 마우스 다운했을 때 발생합니다.
item-up	(event: ItemEvent<T>) => void	아이템에 마우스 업 했을 때 발생합니다.
item-click	(event: ItemEvent<T>) => void	아이템에 마우스 클릭 했을 때 발생합니다.
item-drag-ready	(event: ListItemDragEvent<T>) => void	드래그 준비가 되었을 때 발생합니다.
item-drag-start	(event: ListItemDragEvent<T>) => void	드래그가 시작되었을 때 발생합니다.
item-drag-move	(event: ListItemDragEvent<T>) => void	드래그 중 움직임이 감지될 때마다 발생합니다.
item-drag-over	(event: ListItemDragEvent<T>) => void	드래그 중인 요소가 특정 영역 위에 이동했을 때 발생합니다.
item-drag-out	(event: ListItemDragEvent<T>) => void	드래그 중인 요소가 특정 영역에서 벗어났을 때 발생합니다.
item-drag-enter	(event: ListItemDragEvent<T>) => void	드래그 중인 요소가 드랍 가능한 영역에 들어갔을 때 발생합니다.
item-drag-leave	(event: ListItemDragEvent<T>) => void	드래그 중인 요소가 드랍 가능 영역에서 밖으로 나갔을 때 발생합니다.
item-drag-end	(event: ListItemDragEvent<T>) => void	드래그가 종료되었을 때 발생합니다.
item-drag-cancel	(event: ListItemDragEvent<T>) => void	드래그가 취소되었을 때 발생합니다.
item-drop	(event: ListItemDragEvent<T>) => void	드래그 중인 요소가 드랍되었을 때 발생합니다.
selection-changing	(event: SelectionEvent<T>) => void	아이템이 선택되기 전에 발생합니다. 이벤트 핸들러에서 preventDefault를 호출하여 선택 작업을 취소할 수 있습니다.
selection-change	(event: SelectionEvent<T>) => void	아이템이 선택된 후에 발생합니다.
node-change	(event: HierarchyListEvent<T>) => void	컬렉션 내부의 노드 변경 시 발생합니다. (collapsing - 접기 전, collapse - 접은 후, expanding - 확장 전, expand - 확장 후, add - 노드 추가, remove - 노드 삭제, move - 노드 이동)