[javascript] gijgo.com 라이브러리 사용하기 - treeView 편

라이브러리는 1편에서 추가 했고 역시 material-icons 사용하기 위해선

아래  CDN 이 추가 되어야 한다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

계층형 구조의 테이블 데이터를 트리형식으로 view 하기

아래와 같이 영역을 잡아놓고
<div class="organization-body">
    <div id="tree"></div>
</div>

샘플 코드
xhr 로 데이터 가져온후 아래 initTree 를 호출한다.
function initTree(data) {
    if (data.companyTreeList) {
        var tree = $('#tree').tree({
            dataSource: data.companyTreeList,
            primaryKey: 'id',
            cascadeSelection: false,
            icons: {
                expand: '<i class="material-icons">add</i>',
                collapse: '<i class="material-icons">remove</i>'
            },
            uiLibrary: 'materialdesign',
            selectionType:,
            'single'
            // single,multiple
            // single,multiple
            dragAndDrop: true
        });

        // 드래그앤 드랍이벤트 등록
        tree.on('nodeDrop', function (e, companyId, parentId, companyOrder) {
            // var company = tree.getDataById(companyId);
            moveCompany(companyId, parentId, companyOrder);
        });

        //체크 박스 이벤트 등록
        tree.on('checkboxChange', function (e, $node, record, state) {
            // console.log("checkboxChange");
            // console.log(e);
            // console.log($node);
            // console.log(record);
            // console.log(state);
        });

        //노드를 클릭할시 이벤트 등록
        tree.on('select', function (e, node, id) {
            var company = tree.getDataById(id);
            treeContext.setSelectedCompany(company);
            renderCompanyInfoBody(company);
        });

        //노드를 클릭해제 할시 이벤트 등록
        tree.on('unselect', function (e, node, id) {
            treeContext.setSelectedCompany(null);
            emptyCompanyInfoBody();
        });

        //이건 그냥 캡슐화 코딩
        treeContext.setTree(tree);

        //모든 노드 하위 펼치기
        expendAll();
    }
}

물론 데이터를 셀렉트 해온후 리스트에서 -> 맵으로 변환하는 컨버팅 작업이 사전실시 되어야 한다. 다음포스팅에 컨버팅 하는 방법을 포스팅 하겟다.

자세한 이벤트 및 function 은 해당 사이트 참조