<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="/post_inc/jstree/style.css">
<script src="/post_inc/jstree/jstree.min.js"></script>
<style>
#jstree_demo a{
color:#222;
}
#show_node{
margin:10px 0;
padding:10px;
border:1px solid;
}
</style>
<button id="tbtn1">폴더추가</button>
<button id="tbtn2">파일추가</button>
<button id="tbtn3">이름변경</button>
<button id="tbtn4">삭제</button>
<button id="tbtn5">모두오픈</button>
<div id="show_node"></div>
<div id="jstree_demo"></div>
<script>
var select_node= null
var jstree1 = null
var tree_data = [
{
"text": "최상위루트",
"type": "root",
"children": [
{
"text": "폴더1",
"type": "default",
"children": [
{
"text": "파일1",
"type": "file",
},
]
},
{
"text": "폴더2",
"type": "default",
},
{
"text": "폴더3",
"type": "default",
"children": [
{
"text": "파일2",
"type": "file",
},
{
"text": "파일3",
"type": "file",
},
]
},
{
"text": "폴더5",
"type": "default",
},
]
}
]
$('#jstree_demo').jstree({
'core': {
"animation": 0,
"check_callback": true,
"themes": { "stripes": true }, // 줄 구분 배경
'data': tree_data
},
"types": {
"#": {
// "max_children": 1,
"max_depth": 4,
"valid_children": ["root"],
},
"root": {
// "icon": "fal fa-tree",
"icon": "fas fa-tree",
"valid_children": ["default"],
},
"default": {
"icon": "far fa-folder",
"valid_children": ["default", "file"],
},
"file": {
"icon": 'far fa-file-alt',
"valid_children": []
}
},
"plugins": [
// "contextmenu", // 오른쪽 버튼
// "dnd", // drag&drop
// "search",
"state",
"types",
// "wholerow"
]
}).on('select_node.jstree', function (e, data) {
select_node = data.node
show_tree()
}).on('rename_node.jstree', function (e, data) {
// console.log(data)
show_tree()
}).on('delete_node.jstree', function (e, data) {
// console.log(data)
show_tree()
});
// 중요!! 해당 부분이 없으면 jstree의 이벤트 사용이 안된다
jstree1 = $('#jstree_demo').jstree(true)
function show_tree(){
$('#show_node').html("id:"+select_node.id+", type:"+select_node.original.type+", text:"+select_node.original.text)
}
function add_tree(type){
// var sel = jstree1.get_selected();
var tmp1 = {
"type": "file",
"text": "새 파일",
"children": false
}
if( type == 'folder'){
tmp1 = {
"type": "default",
"text": "새 폴더",
}
}
// console.log(sel)
if (!select_node) {
alert("선택된 항목이 없습니다.")
return false;
}
if (select_node.parents.length == 3 && type == 'folder') {
alert("더이상 하위 폴더을 만들 수 없습니다.")
return false;
}
if (select_node.type == 'file') {
alert("파일에는 하위 항목을 추가 할 수 없습니다.")
return false;
}
// sel = jstree1.create_node(sel[0], tmp1);
var sel = jstree1.create_node(select_node.id, tmp1);
// console.log(sel)
if (sel) {
jstree1.edit(sel);
}
else{
}
}
$('#tbtn1').click(function(){
add_tree('folder')
})
$('#tbtn2').click(function(){
add_tree('file')
})
$('#tbtn3').click(function(){
if (!select_node) {
alert("선택된 항목이 없습니다.")
return false;
}
jstree1.edit(select_node.id);
})
$('#tbtn4').click(function(){
if (!select_node) {
alert("선택된 항목이 없습니다.")
return false;
}
if( select_node.id == 'j1_1' ){
alert("최상위 입니다")
return false;
}
jstree1.delete_node(select_node.id);
})
$('#tbtn5').click(function(){
jstree1.open_all();
})
</script>
제일 중요한 부분은 jstree1 = $('#jstree_demo').jstree(true) 이부분이다.
jstree를 선언해봤자, 위 부분을 안해주면 해당 트리에 대한 이벤트를 사용할 수 가 없다.
그리고 해당 노드에 필요한 항목들은 select_node라는 변수에 다 들어 있기 때문에 그 부분을 잘 활용하면 쉬울 것이다.
그밖에 이벤트들은 다 간단하니 위 예제만 봐도 응용하는데 무리가 없을 것이다.