JSON List데이터를 트리구조로 변환

선언문

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/zooTree.js"></script>

변환해야 할 배열 모델

첫번째 인수의 data안의 값이 배열이다

var jsonData = getTreeModel( data, '999',{
    id: "itemId",
    parentId: "parentId",
    order: ["label","desc"]
});

[
    {
        "label": "root",
        "itemId": "root",
        "parentId": "999"
    },
    {
        "label": "User",
        "itemId": "role1",
        "parentId": "root"
    },
    {
        "label": "subUser1",
        "itemId": "role11",
        "parentId": "role1"
    },
    {
        "label": "subUser2",
        "itemId": "role12",
        "parentId": "role1"
    },
    {
        "label": "subUser2-1",
        "itemId": "role121",
        "parentId": "role12"
    },
    {
        "label": "subUser2-1-1",
        "itemId": "role1211",
        "parentId": "role121"
    },
    {
        "label": "subUser2-1-2",
        "itemId": "role1212",
        "parentId": "role121"
    },
    {
        "label": "Admin",
        "itemId": "role2",
        "parentId": "root"
    },
    {
        "label": "Guest",
        "itemId": "role3",
        "parentId": "root"
    }
]

변환된 트리 모델

두번째 인수가 최상위 부모값이 되고, 세번째 인수는 id(key)와 parentId(key)를 다른 키워드로 사용하고 싶을 때 커스텀 하여 사용할 수 있다

var jsonData = getTreeModel( data, '999',{
    id: "itemId",
    parentId: "parentId",
    order: ["label","desc"]
});

[
    {
        "label": "root",
        "itemId": "root",
        "parentId": "999",
        "children": [
            {
                "label": "User",
                "itemId": "role1",
                "parentId": "root",
                "children": [
                    {
                        "label": "subUser1",
                        "itemId": "role11",
                        "parentId": "role1",
                        "children": []
                    },
                    {
                        "label": "subUser2",
                        "itemId": "role12",
                        "parentId": "role1",
                        "children": [
                            {
                                "label": "subUser2-1",
                                "itemId": "role121",
                                "parentId": "role12",
                                "children": [
                                    {
                                        "label": "subUser2-1-1",
                                        "itemId": "role1211",
                                        "parentId": "role121",
                                        "children": []
                                    },
                                    {
                                        "label": "subUser2-1-2",
                                        "itemId": "role1212",
                                        "parentId": "role121",
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "label": "Admin",
                "itemId": "role2",
                "parentId": "root",
                "children": []
            },
            {
                "label": "Guest",
                "itemId": "role3",
                "parentId": "root",
                "children": []
            }
        ]
    }
]

JSON 트리구조를 UL,LI태그로 만들기

JSON 데이터 DOM <ul><li>...</li></ul> 만드는 과정

1. $(".verticalTree")로 반영 할 DOM 선택
2. $(".verticalTree").zooTree(jsonData)에서 첫번째 인수 jsonData를 가지고 ul,li 태그로 만들어준다.(jsonData가 배열모델이든 Tree모델이든 상관없이 만들어준다)
3. render를 이용하여 추가 태그를 생성할 수 있고, jsonData의 값을 맵핑할 수 있다.

$(".verticalTree").zooTree(jsonData, {
forceCreate: true, // 현재 사용하지 않음
render: function(data) { // <li>...</li> 태그안에 내용을 커스텀 할 수 있다
    var $div = $("<a>").append(data.label);
    return $div;
}

CSS로 만든 조직도

선언문

<link rel="stylesheet" type="text/css" href="css/zooTree.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/zooTree.js"></script>

세로형 조직도

$(".verticalTree").zooTree(jsonData, {
    forceCreate: true, // 현재 사용하지 않음
    render: function(data) { // <li>...</li> 태그안에 내용을 커스텀 할 수 있다
        var $div = $("<a>").append(data.label);
        return $div;
    }
});

<div class="verticalTree"></div>

가로형 조직도(최상위계층:중단)

$(".horizontalTree").zooTree(jsonData, {
    forceCreate: true, // 현재 사용하지 않음
    render: function(data) { // <li>...</li> 태그안에 내용을 커스텀 할 수 있다
        var $div = $("<a>").append(data.label);
        return $div;
    }
});

<div class="horizontalTree"></div>

가로형 조직도(최상위계층:상단)

$(".horizontalTreeTop").zooTree(jsonData, {
    forceCreate: true, // 현재 사용하지 않음
    render: function(data) { // <li>...</li> 태그안에 내용을 커스텀 할 수 있다
        var $div = $("<a>").append(data.label);
        return $div;
    }
});

<div class="horizontalTreeTop"></div>