728x90
반응형
Dynatree
제이쿼리에서는 dynatree라고 하는 플러그인을 제공한다.
여러 오픈소스가 존재하지만 자주 사용하여보기도 하였고 편리하다고 생각되어 dynatree 를 소개하고자 한다.
대부분의 트리구조는 Json, Html의 태그를 이용하여 트리를 그려주는 것이 대부분이다.
dynatree도 여타 다른 트리구조와 마찬가지로 다양한 방법을 제공한다.
li 태그를 이용한 트리구조
<div id = "tree">
<ul id = "treeList">
<li id = "test1"></li>
<li id = "test2"></li>
<li id = "test3"></li>
<li id = "test4" class = "childList">
<ul>
<li id = "child1"></li>
<li id = "child2"></li>
</ul>
</li>
</ul>
</div>
- 위와같은 방식으로 트리를 그려줄 수 있지만 화면이 많이 복잡해진다는 문제점이 있다.
- 정적인 트리구조를 그리는 간단한 데이터라면 이런식으로 해도 무방하다.
dynatree를 이용한 트리구조
$('#treeList').dynatree({
title: 'treeTest',
fx: {
height: 'toggle',
duration: 200
},
autoFocus: false,
initAjax: {
url : '/tree/test',
data : testData
},
onLazyRead : function(node) {
node.appendAjax({
url : 'tree/test',
data: testData,
success : function(node){
if(node.data.isChildExpand){
node.visit(function(childNode) {
childNode.data.isChildExpand = true;
childNode.expand(true);
});
}
}
});
}
});
- 해당방식은 lazyLoading을 통해 해당 tree의 하위리스트(children)을 가져오는 방식이다.
- 부모의 node를 통해 해당 node의 하위리스트(children)만 가져오기 때문에 쿼리 짜기도 편하다.
dynatree 옵션
javascript에서 dynatree 옵션값들은 다양하다.
node.isSelected(); | boolean 값으로 해당 노드가 선택 여부를 리턴 |
node.select(true); | 노드 선택 |
node.select(false); | 노드 선택 해제 |
$("testTree").dynatree("getSelectedNodes"); | "testTree" 중 선택된 노드를 조회(객체는 제이쿼리 객체) |
node.getParent(); | 해당 노드의 부모를 조회 |
node.getChildren(); | 해당 노드의 자식을 조회 |
$("tree").dynatree("getTree") | 해당 엘리먼트 트리 조회 |
tree.getNodeByKey("key1234") | "key1234" 키로 노드를 조회 |
$("tree").dynatree("getRoot"); | "tree" 엘리먼트의 루트 노드를 조회 |
node.addChild({title: "newNode", key: "1234"}) | 해당노드에 자식노드를 추가 |
node.countChildren(); | 해당노드의 자식들의 숫자를 조회 |
node.getLevel(); | 해당노드의 뎁스 조회 |
node.getNextSibling(); | 다음노드 조회(같은 뎁스) |
node.getPrevSibling(); | 이전노드 조회(같은 뎁스) |
node.hasChildren(); | 해당노드의 자식 존재여부 조회 |
node.isFirstSibling(); | 해당 노드가 첫번째 노드인지 조회(같은 뎁스) |
node.isExpanded(); | 해당 노드가 expand 되어있는지 조회 |
node.isFocused(); | 해당 노드가 포커스 상태인지 조회 |
node.isLastSibling(); | 해당 노드가 마지막 객체인지 조회 |
node.move(targetNode, mode); | targetNode로 노드 이동 |
node.remove(); | 해당 노드 삭제 |
node.removeChildren(); | 해당 노드 자식 삭제 |
node.sortChildren(cmp, deep); | 해당 노드 자식 정렬 |
'javascript' 카테고리의 다른 글
[v8] V8엔진(Chrome V8) (0) | 2023.01.25 |
---|---|
[typeScript] 타입스크립트를 왜 쓸까? (0) | 2023.01.18 |