들어가며

이 강좌에서는 TreeView의 ItemModel에 대해 배워보겠습니다.

이론

TreeView ItemModel은 GridView의 ItemModel과 동일하고, 각 item은 TreeDataProvider의 한 행을 표시합니다.
GridView의 ItemModel은 A10강좌에서 확인 할 수 있습니다.

GridView의 item과 TreeView의 item은 유사하지만 다른점이 있습니다.

  1. TreeView에는 RowGrouping을 지원하지 않습니다.
  2. Sorting이나 Filtering은 계층 구조 내에서 진행됩니다. 예를 들어, 부모 행이 Filtering에서 제외되면 자식 행들 역시 자동적으로 제외됩니다. 마찬가지로 Sorting이 계층 구조를 변경하지는 않고, 자식들을 정렬하게 됩니다.

데이터에서도 다른점이 있습니다.
LocalDataProvider의 경우 데이터가 삭제되거나 추가 되었을 경우 rowId가 변경됩니다. 삭제된 rowId에 다음 데이터로 채워지고 추가할 경우 지정한 rowId부터 추가한 데이터가 채워지고 기존의 데이터의 rowId는 밀려나게 됩니다.
하지만 TreeDataProvider는 삭제하거나 추가하여도 초기 설정된 rowId는 그대로 유지됩니다. 새로 행을 추가할 경우 TreeDataProvider에 저장되어 있는 마지막 rowId 다음 순으로 추가됩니다. 모든 행을 삭제 후 추가하여도 rowId는 다시 1부터 시작되지 않는다는 뜻입니다.

실습

  1. firsetRow()함수는 첫번째 행의 rowId를 가져오는 함수입니다. GridBase.getDataRow함수를 사용하여 TreeView의 첫번째 Index에 위치해 있는 rowId를 구하였습니다.

     function firstRow(){
     var rowId = treeView.getDataRow(0); 
     alert("rowId : "+rowId);
 }

  2. clearRows함수는 TreeDataProvider에 모든 값을 지우함수 입니다. DataProvider.clearRows함수를 사용하였습니다.

     function clearRows(){
     dataProvider.clearRows();
 }

  3. setRows함수는 TreeDataProvider에 값을 불러오는 함수입니다. TreeDataProvider.setRows함수를 사용하였습니다.

     function setRows(){
     dataProvider.setRows(json,"tree");
 }

실행화면

  1. 버튼을 클릭하여 첫번째 행의 rowId를 확인합니다.
  2. 버튼을 클릭하여 TreeDataProvider의 데이터를 전부 삭제 합니다.
  3. 버튼을 클릭하여 TreeDataProvider의 데이터를 불러옵니다.
  4. 다시 버튼을 클릭하여 첫번째 행의 rowId를 확인합니다.

전체 소스코드

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


$(document).ready( function() {
	$("[name='btnFirstRow']").click(firstRow);
	$("#btnClearRows").click(clearRows);
	$("#btnSetRows").click(setRows);

	RealGridJS.setTrace(false);
	RealGridJS.setRootContext("/script");
	
	dataProvider = new RealGridJS.LocalTreeDataProvider();
	treeView = new RealGridJS.TreeView("realgrid");
	treeView.setDataSource(dataProvider);
	
	dataProvider.setFields([{
	  fieldName: "tree"
	}, {
	  fieldName: "product"
	}, {
	  fieldName: "price"
	}]);
	
	treeView.setColumns([{
	  name: "product",
	  fieldName: "product",
	  width: 200
	}, {
	  name: "price",
	  fieldName: "price"
	}]);
	
	dataProvider.setRows(json,"tree");
});

function firstRow(){
	var rowId = treeView.getDataRow(0); 
	alert("rowId : "+rowId);
}

function clearRows(){
	dataProvider.clearRows();
}

function setRows(){
	dataProvider.setRows(json,"tree");
}
</script>
HTML
1. <input type="button" class="btn btn-primary btn-xs" name="btnFirstRow" value="첫번째 행의 rowId" /> 버튼을 클릭하여 첫번째 행의 rowId를 확인합니다.<br/>
2. <input type="button" class="btn btn-primary btn-xs" id="btnClearRows" value="전체 데이터 삭제" /> 버튼을 클릭하여 TreeDataProvider의 데이터를 전부 삭제 합니다.<br/>
3. <input type="button" class="btn btn-primary btn-xs" id="btnSetRows" value="데이터 불러오기" /> 버튼을 클릭하여 TreeDataProvider의 데이터를 불러옵니다.<br/>
4. 다시 <input type="button" class="btn btn-primary btn-xs" name="btnFirstRow" value="첫번째 행의 rowId" /> 버튼을 클릭하여 첫번째 행의 rowId를 확인합니다.<br/>
<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지

API 참조