jsTree 기본 사용법

회사 고도화 프로젝트 중입니다.
기존에 사용하던 zTree에서 jsTree로 이전함에 따라
사용법을 익히려고 합니다.

1. cdn

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

제이쿼리와 bootstrap, jsTree 플러그인을 cdn을 통해 링크합니다.
아이콘은 폰트어썸을 사용합니다.

2.1 기본 사용법

• 2.1.1 HTML

<div id="kt_docs_jstree_basic">
    <ul>
        <li>
            Root node 1
            <ul>
                <li data-jstree='{ "selected" : true }'>
                    <a href="javascript:;">
                        Initially selected </a>
                </li>
                <li data-jstree='{ "icon" : "flaticon2-gear text-success " }'>
                    custom icon URL
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
                <li data-jstree='{ "icon" : "flaticon2-rectangular text-danger" }'>
                    Custom icon class (bootstrap)
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
            <a href="http://www.keenthemes.com">
                Clickable link node </a>
        </li>
    </ul>
</div>

data-jstree 속성의 selected, icon, opened, disabled, type 등의
속성들을 이용할 수 있습니다.

• 2.1.2 javascript

$('#kt_docs_jstree_basic').jstree({
    "core" : {
        "themes" : {
            "responsive": false
        }
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder"
        },
        "file" : {
            "icon" : "fa fa-file"
        }
    },
    "plugins": ["types"]
});

• 2.1.3 화면

2.2 추가기능

• 2.2.1 html의 태그가 아닌 js코드로도 노드를 생성할 수 있습니다.

$('#kt_docs_jstree_basic').jstree({
    "core" : {
        "themes" : {
            "responsive": true
        },
      	//추가된 부분 시작
        "data":[
        	{
        		"text" : "Parent",
        		"children": [{
        			"text":"child1"
        			},
        			{
        			"text":"child2"
        			}
        		]
        	},
        	"another"
        ]//추가된 부분 끝
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder text-primary"
        },
        "file" : {
            "icon" : "fa fa-file text-primary"
        }
    },
    "plugins": ["types"]
});

• 2.2.2 data-jstree속성도 js코드로 다룰 수 있습니다.

$('#kt_docs_jstree_basic').jstree({
    "core" : {
        "themes" : {
            "responsive": true
        },
        "data":[
        	{
        		"text" : "Parent",
        		"children": [{
        			"text":"child1",
        			"state":{"selected":true}//추가
        			},
        			{
        			"text":"child2",
        			"state":{"disabled":true}//추가
        			}
        		]
        }, "another"
        ]
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder text-primary"
        },
        "file" : {
            "icon" : "fa fa-file text-primary"
        }
    },
    "plugins": ["types"]
});

2.2.3 dragAndDrop도 간편하게 사용할 수 있습니다.

$('#kt_docs_jstree_basic').jstree({
    "core" : {
        "themes" : {
            "responsive": true
        },
        "data":[
        	{
        		"text" : "Parent",
        		"children": [{
        			"text":"child1",
        			"state":{"selected":true}
        			},
        			{
        			"text":"child2",
        			"state":{"disabled":true}
        			}
        		]
        }, "another"
        ],
        //"check_callback":true --check_callback 허용시 dnd로 트리 내부 인사이동 가능
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder text-primary"
        },
        "file" : {
            "icon" : "fa fa-file text-primary"
        }
    },
    "plugins": ["types", "dnd"]//추가
});

간단한 사용방법을 알아보았으나, 회사 프로젝트에서 쓰일 모습은
공식문서에서의 쓰임새와 상이하므로 다음 포스팅에서
회사 플젝을 위한 응용을 하여보겠습니다.