들어가며

이 강좌에서는 b9-1강좌에 이어서 TreeDataProvider의 JSON Data 구조에 대해 알아보도록 하겠습니다.

이론

JSON형식의 Tree Data를 로드할때는 Array와는 다르게 Tree의 DataField가 필요없습니다.

Array Tree Data의 Fields

provider.setFields([{
	fieldName : "tree" //트리 구성정보를 가지고 있는 필드.
}, {
	fieldName : "field1"
}, {
	fieldName : "field2"
}]);

JSON Tree Data의 Fields

provider.setFields([{
	fieldName : "field1"
}, {
	fieldName : "field2"
}]);

Tree에서 사용되는 JSON의 데이터 구성은 한개의 노드 값을 가지고 있는 parent Object에 자식 노드값들 children Array Objects로 구성되어 있습니다.
반드시 children Array Objects의 Object name값은 동일해야 합니다.

먼저 그리드 화면에는 보이지 않지만 최상위 루트로 지정되어있는 row의 Object부터 데이터를 구성합니다.
children Array Objects의 Object name값은 tree로 지정하겠습니다.

json = { 
	tree : null 
}

Hidden Root = tree = parent Object

그리고 숨겨진 최상위 루트하위에 보여지는 두개의 루트노드를 생성해보겠습니다.
children Array Objects에 두개의 Object를 생성합니다.

json = { 
	tree : [ 
		{ field : "row1" }, 
		{ field : "row2" } 
	] 
}

Hidden Root = tree = parent Object
	┗ Root 1 = { field : "row1" } = children Object 1
	┗ Root 2 = { field : "row2" } = children Object 2 
	// tree Object에 Object Array값을 children Array Objects라 지칭하겠습니다.

그럼 이제 row1 루트노드에 자식노드들을 추가해 보겠습니다. 추가하는 방법은 위에서 숨겨진 최상위 노드에 2개의 루트노드를 추가한 방법과 동일합니다.
field1 Object에 children Array Objects를 추가합니다.

json = { 
	tree : [ 
		{ 
			field : "row1",
			tree : [
				{ field : "row1-1" },
				{ field : "row1-2" }
			]
		 }, 
		{ field : "row2" } 
	] 
}

Hidden Root
	┗ Root 1 = { field : "row1" } = children Object 1
		┗ child 1 = { field : "row1-1" } = children of children Object 1
		┗ child 2 = { field : "row1-2" } = children of children Object 2
	┗ Root 2 = { field : "row2" }

json에 정의한 데이터와 같이 계층구조로 JSON Array Object를 생성하기 때문에 앞서 설명한 tree node의 정보를 가지고있는 DataField를 사용하지 않습니다.
위와 같은 데이터 형식을 로드하기 위해서는 TreeDataProvider.fillJsonData를 사용합니다.
children Array Objects의 Object name을 fillJsonData함수의 옵션속성 rows의 값으로 설정합니다.
옵션의 종류는 DataFillOptions에서 확인 할 수 있습니다.

var json = json array;

provider.fillJsonData(json, {rows : "tree"}); 

그러면 이제 실습을 통해 직접 데이터를 구성해 보도록 하겠습니다.

실습

이제 실제 데이터를 트리로 구성해보도록 하겠습니다.

위와 같은 데이터가 있을 경우 직접 하드코딩으로 데이터를 작성해 보면 다음과 같습니다.
(트리로 생성 가능한 데이터를 트리구조로 자동 생성하는 로직은 다음 강좌에 소개도록 하겠습니다.)

var json = {
	tree : [ {
		product : "국내",
		tree : [ {
			product : "컴퓨터",
			tree : [ {
				product : "인텔 SSD 520 120GB",
				price : 63900
			}, {
				product : "LED 게이밍키보드",
				price : 29700
			}, {
				product : "팩스무선레이저복합기",
				price : 119000
			} ]
		}, {
			product : "서적",
			tree : [ {
				product : "미움받을 용기",
				price : 13410
			}, {
				product : "기탄 세계명작동화50권",
				price : 69000
			} ]
		} ]
	}, {
		product : "해외",
		tree : [ {
			product : "가전",
			tree : [ {
				product : "32G Amazon phone",
				price : 130
			}, {
				product : "TDK- Wireless Speaker",
				price : 49.99
			}, {
				product : "대륙의 실수 QCY QY5s",
				price : 18.59
			} ]
		}, {
			product : "TV/영상",
			tree : [ {
				product : "LG 55LF6000",
				price : 498
			}, {
				product : "Samsung Smart LED FHD 60\"",
				price : 897.99
			} ]
		} ]
	} ]
};

fillJsonData함수로 생성한 데이터를 불러옵니다.
이때 트리의 노드정보를 가지고있는 Object name값인 tree를 fillJsonData의 옵션 rows에 설정합니다.

dataProvider.fillJsonData(rows, { rows:"tree" });

아래 코드는 버튼의 클릭 이벤트 입니다.

$("#btnLoadData").click(function(){
	dataProvider.fillJsonData(rows, { rows:"tree" });
});

실행화면

버튼을 클릭하여 그리드에 데이터를 불러옵니다.

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>

<script>
var treeView;
  var dataProvider;
	var json = {
		tree : [ {
			product : "국내",
			tree : [ {
				product : "컴퓨터",
				tree : [ {
					product : "인텔 SSD 520 120GB",
					price : 63900
				}, {
					product : "LED 게이밍키보드",
					price : 29700
				}, {
					product : "팩스무선레이저복합기",
					price : 119000
				} ]
			}, {
				product : "서적",
				tree : [ {
					product : "미움받을 용기",
					price : 13410
				}, {
					product : "기탄 세계명작동화50권",
					price : 69000
				} ]
			} ]
		}, {
			product : "해외",
			tree : [ {
				product : "가전",
				tree : [ {
					product : "32G Amazon phone",
					price : 130
				}, {
					product : "TDK- Wireless Speaker",
					price : 49.99
				}, {
					product : "대륙의 실수 QCY QY5s",
					price : 18.59
				} ]
			}, {
				product : "TV/영상",
				tree : [ {
					product : "LG 55LF6000",
					price : 498
				}, {
					product : "Samsung Smart LED FHD 60\"",
					price : 897.99
				} ]
			} ]
		} ]
	};


  $(document).ready( function() {

    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalTreeDataProvider();
    treeView = new RealGridJS.TreeView("realgrid");
    treeView.setDataSource(dataProvider);

    dataProvider.setFields([{
      fieldName: "product"
    }, {
      fieldName: "price"
    }]);

    treeView.setColumns([{
      name: "product",
      fieldName: "product",
      width: 200
    }, {
      name: "price",
      fieldName: "price"
    }]);

	$("#btnLoadData").click(function(){
		dataProvider.fillJsonData(json,{rows : "tree"});
	});
	
  })
</script>

HTML

<input type="button" class="btn btn-primary btn-xs" id="btnLoadData" value="데이터 불러오기" /> 버튼을 클릭하여 그리드에 데이터를 불러옵니다.
<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지

• TreeView

API 참조

• TreeLocalDataProvider.setRows()