Tree (with jstree)

Tree 컴포넌트의 구조와 사용법을 설명합니다. Tree 컴포넌트는 jsTree라이브러리를 사용하였으며 컴포넌트에서 제공하는 기능 외에도 jsTree의 옵션을 그대로 사용할 수 있도록 구성되어 있습니다. jstree의 사용법은 jsTree 문서를 참고하십시오.

기본 코드

<div id="treeArea"></div>

var tree = Nue.component('tree', options);

Options

{
    el: '#treeArea',          // Tree 영역 DOM Selector
    model: Nue.model(),       // Tree의 Data Model 객체
    autoRender: true          // Model에서 fetch완료시 자동으로 rendering하는 옵션
    ...jsTree options...
}

Data 구조

Tree Component에 적용되는 data는 아래의 형태로 parsing되어야 합니다.

[
    {
        id: 1001,         //-> 노드의 고유 ID, Root일 경우 '#'
        text: '텍스트',    //-> 노드 text
        parent: 10,       //-> 부모 노드의 ID, 부모가 Root일 경우 '#'
        sort: 0,          //-> Sorting 순서 number
        type: 'folder'    //-> Setting된 아이콘 Type name
    }
]

Rendering

Component를 생성 후 model data를 적용하여 rendering합니다.

기본 Rendering

기본 로컬 data 적용

var tree = Nue.component('tree', { el: '#treeArea' });

// model.set()
tree.model.set([
    { id: 1001, text: '부모노드', parent: '#', sort: 0, type: 'folder' },
    { id: 10001, text: '자식노드', parent: 1001, sort: 0, type: 'default' }
]);

Ajax Model Rendering

model이 ajax로 fetch하여 가져오는 response data 적용

var tree = Nue.component('tree', {
    el: '#treeArea',
    model: Nue.model({ url: '/api/trees' }) // ajax model binding
});

/**
 * model fetch후 완료시 자동 data setting 및 rendering
 * response data 예시
 * [{ id: 1001, text: '부모노드', parent: '#', sort: 0, type: 'folder' },
 *  { id: 10001, text: '자식노드', parent: 1001, sort: 0, type: 'default' }]
 */
grid.model.fetch();

자동 Rendering 끄기

자동 Rendering끄기는 model이 ajax로 가져오는 data인 경우 rendering시점을 사용자가 조절하고 싶을 때 사용합니다. 이 옵션을 끄면 model에서 fetch완료 시 자동으로 rendering을 하지 않으며, 사용자가 임의로 render() 명령을 내리면 그때 rendering을 합니다.

// model fetch후 완료시 수동으로 render()
var tree = Nue.component('tree', {
    el: '#treeArea',
    model: Nue.model({ url: '/api/trees' }), // model binding
    autoRender: false    // 자동 rendering off
});

tree.model.fetch().then(function(){
    setTimeOut(function(){
        tree.render();
    },1000);
});

데이터 가져오기

Component model의 getJSON() 메소드를 사용합니다. model의 사용법은 Model문서를 확인하십시오.

Destroy

Component의 model과 view의 모든 데이터를 default설정으로 초기화 합니다.

// Component 생성
var tree = Nue.component('tree', { ...options...});
// Component 초기화.
tree.destroy(); //-> DOM과 model data모두 초기화

DOM Selector 및 DataTables 객체 접근

생성된 Component는 $el, jsTree 의 키워드로 각각 DOM과 jsTree 객체에 접근할 수 있습니다.

var tree = Nue.component('tree', { el: '#treeArea' });

tree.$el //-> tree영역 DOM Selector $('#treeArea');
tree.jsTree //-> 생성된 jsTree 객체 $('#treedArea').jstree();