[JavaScript] JSON 트리구조 변환 (Json tree, jqtree)

Posted by 김성철

JSON 트리구조로 변환

* 참고 URL : http://gjjoo.github.io/portfolio/Plugin/zooTree/index.html  
  
* 상위, 하위 그룹등으로 표현되야되는 값들을 제이슨타입으로 변환해줌  

기존데이터는 아래와같이 아이디 부모아이디 등으로 되어있는 값이 존재함

=================================================================================================================
[
{
“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”
}
]
=================================================================================================================

해당 함수 사용하여서 상위노드, 하위노드로 구분하여 트리구조로 변환

=================================================================================================================

[
{
“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”: []
}
]
}
]

=================================================================================================================

사용법

1. 하단의 getTreeModel 함수를 선언  
2. 작업을 처리할 데이터를 받아옴  
	ajax 를 사용하여서 받아왔으며, 서버단에서  
	"JSONArray" 로 리턴받아 왔음  
		※ 받아온데이터에 JSON.stringify(data); 를 사용하면 안됨.  
  
3. 받아온 데이터를 getTreeModel 함수를 이용하여 변환  
	첫번째 인자 : 트리구조로 정렬할 데이터  
	두번째 인자 : 최상의 부모 값  
		* DB에 저장되어있는 최상의 그룹의 부모그룹key값  
			ex) id : 무역회사 par_id : 0  
	세번째 인자 :  
		id : 고유 키값  
		parentId : 부모 키값  
		order : 정렬 데이터,  
			ex) order: ["dept_seq","desc"]  
				dept_seq 를 내림차순으로 정렬  

=================================================================================================================
var sampleData = getTreeModel( data, ‘0’,{
id: “dept_id”,
parentId: “dept_par_id”,
order: [“dept_seq”,”desc”]
});

=================================================================================================================

getTreeModel 함수

=================================================================================================================

/**

  • 트리 모델 변환 메서드
    /
    /
    id : 키값
  • parentId : 부모 키값
  • order : 정렬 기준 값*/
    function getTreeModel ( _list, _rootId , setting) {
    setting = $.extend({
    id: “dept_id”,
    parentId: “dept_par_id”,
    order: [setting.id,”desc”]

    }, setting);

    //최종적인 트리 데이터
    var _treeModel = [];

    //전체 데이터 길이
    var _listLength = _list.length;

    //트리 크기
    var _treeLength = 0;

    //반복 횟수
    var _loopLength = 0;

    //재귀 호출
    function getParentNode ( _children, item ) {
    //전체 리스트를 탐색
    for ( var i=0, child; child = _children[i]; i++ ) {
    //부모를 찾았으면,
    if ( child[setting.id] === item[setting.parentId] ) {
    var view={};
    for(keyArr in item){
    view[keyArr] = item[keyArr];
    }
    view[“children”]=[];
    //현재 요소를 추가하고
    child.children.push(view);
    //트리 크기를 반영하고,
    _treeLength++;
    //데이터상에서는 삭제
    _list.splice( _list.indexOf(item), 1 );
    //현재 트리 계층을 정렬
    child.children.sort(function(a, b)
    {
    return a[setting.order[0]] < b[setting.order[0]] ? -1 : a[setting.order[0]] > b[setting.order[0]] ?
    (setting.order[1].toLowerCase() == “desc” ? 1 : 0) : (setting.order[1].toLowerCase() == “asc” ? 1 : 0);
    });

             break;  
         }  
      
         //부모가 아니면,  
         else  
         {  
             if( child.children.length )  
             {  
                 arguments.callee( child.children, item );  
             }  
         }  
      
     }    }  
    

    //트리 변환 여부 + 무한 루프 방지
    while ( _treeLength != _listLength && _listLength != _loopLength++ ) {
    //전체 리스트를 탐색
    for ( var i=0, item; item = _list[i]; i++ ) {
    //최상위 객체면,
    if ( item[setting.parentId] === _rootId ) {

             var view={};  
             for(keyArr in item){  
                 view[keyArr] = item[keyArr];  
             }  
             view["children"]=[];  
             //현재 요소를 추가하고,  
             _treeModel.push(view);  
             //트리 크기를 반영하고,  
             _treeLength++;  
             //데이터상에서는 삭제  
             _list.splice(i, 1);  
             //현재 트리 계층을 정렬  
             _treeModel.sort( function ( a, b )  
             {  
                 return a[setting.order[0]] < b[setting.order[0]] ? -1 : a[setting.order[0]] > b[setting.order[0]] ?  
                     (setting.order[1].toLowerCase() === "desc" ? 1 : 0) : (setting.order[1].toLowerCase() === "asc" ? 1 : 0);  
             });  
             break;  
         }  
         //하위 객체면,  
         else {  
             getParentNode( _treeModel, item );  
         }  
     }    }    return _treeModel;   };  
    

=================================================================================================================