[jstree] jstree 예제2 - 노드 편집
노드를 선택하고 오른쪽 마우스버튼을 누르면 노드 추가, 삭제 등의 기능이 제공됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree example demo1</title>
<script type="text/javascript" src="./_lib/jquery.js"></script>
<script type="text/javascript" src="./_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="./_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
</head>
<body class="nosidebar">
<div id='demo1' class='demo'>
<ul>
<li id='phtml_1'><a href='#'>부모 노드 1</a>
<ul>
<li id='phtml_2'><a href='#'>자식 노드 1</a></li>
<li id='phtml_3'><a href='#'>자식 노드 2</a></li>
<li id='phtml_4'><a href='#'>자식 노드 3</a></li>
</ul>
</li>
<li id='phtml_5'><a href='#'>부모 노드 2</a>
<ul>
<li id='phtml_6'><a href='#'>자식 노드 1</a></li>
<li id='phtml_7'><a href='#'>자식 노드 2</a></li>
<li id='phtml_8'><a href='#'>자식 노드 3</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#toggle_node").click(function() {
$("#demo1").jstree("toggle_node", "#phtml_1");
});
$("#demo1").bind("open_node.jstree close_node.jstree", function(e) {
$("#log1").html("Last operation: " + e.type);
}).jstree({
"themes" : {
"theme" : [ "default" ]
}, // 트리 테마
"ui" : {
"initially_select" : [ "phtml_2" ]
},
"core" : {
"initially_open" : [ "phtml_1" ],
"html_titles" : [ "true" ]
},
"plugins" : [ "themes", "html_data" , "crrm", "contextmenu" ],
"contextmenu" : {
"items" : {
"create" : {
"separator_before" : false,
"separator_after" : true,
"label" : "만들기",
"action" : function (obj) { this.create(obj); }
},
"rename" : {
"separator_before" : false,
"separator_after" : true,
"label" : "이름변경",
"action" : function (obj) { this.create(obj); }
},
"remove" : {
"separator_before" : false,
"separator_after" : true,
"label" : "삭제",
"action" : function (obj) { this.create(obj); }
},
"ccp" : {
"separator_before" : false,
"separator_after" : true,
"label" : "편집",
"action" : function (obj) { this.create(obj); }
},
"user_define" : {
"separator_before" : false,
"separator_after" : true,
"label" : "사용자정의",
"action" : function (obj) { this.create(obj); }
},
}
}
});
});
</script>
<div id="log1">log</div>
</body>
</html>
[jstree] jstree 예제2 - 노드 편집
'programming > jstree' 카테고리의 다른 글
| [jstree] jstree 예제4 - node id 가져오기 (0) | 2012.09.28 |
|---|---|
| [jstree] jstree 예제3 - drag and drop (0) | 2012.09.28 |
| [jstree] jstree theme - themes 테마 (0) | 2012.09.28 |
| [jstree] jstree 예제1 - tree (1) | 2012.09.28 |