[jsTree] jstree 데이터 포맷 (ft. JSON DATA)

jstree 에서 사용되는 data format은 html 과 json 형식이 있는데

html 보다는 json형식을 많이 사용하기 때문에 json 데이터 포맷에 대해 알아보고자 한다.

▷jstree 기본 형식(첫번째 제공 형식)

{
	id : "string",    // node id로 사용되는데 필수값이다.
	text : "string",    // node text로 트리에서 node명 같은것이다.
	icon : "string",    // node 좌측에 아이콘이 존재하는데 custom 아이콘 사용이다.
	state : {
		opened : boolean,    // is the node open
		disabled : boolean,    // is the node disabled
		selected : boolean    // is the node selected
	},
	children : [],    // 자식 요소를 집어넣는 곳이다.
	li_attr : {},    // attributes for the generated LI node
	a_attr : {}    // attributes for the generated A node
}

▶예제 1 ) 기본 형식을 사용한 예제

$('#tree').jstree({ 'core' : {
  'data' : [
     'Simple root node',
     {
       'text' : 'Root node 2',
       'state' : {
         'opened' : true,
         'selected' : true
       },
       'children' : [
         { 'text' : 'Child 1' },
         'Child 2'
       ]
    }
  ]
} });

▷ 대안 (두번째 제공 형식)

{
	id : "string", // node id
	parent : "string", // 부모 요소 이다 있을 경우 id를 없을 경우 "#"을 넣어주면 된다.
	text : "string", // node text
	icon : "string", // node icon
	state : {
		opened : boolean,  // is the node open
		disabled : boolean,  // is the node disabled
		selected : boolean  // is the node selected
	},
	li_attr : {},  // attributes for the generated LI node
	a_attr : {}  // attributes for the generated A node
}

▶예제 1 ) 두번째 제공 형식을 사용한 예제

$('#tree').jstree({ 'core' : {
  'data' : [
      { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
      { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
      { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
      { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
  } 
});

사실 예제1) 과 예제2) 의 결과는 같다.