들어가며

이번 강좌에서는 API를 사용하여 트리뷰(TreeView)의 자식의 행 또는 자손의 행 그리고 자신의 모든 조상의 행의 RowId를 가져오는 방법에 대해 배워 보겠습니다.

이론

행에 하위노드의 RowId를 가져오는 방법으로는 크게 2종류가 있습니다.
지정한 행의 자식행을 가져오는 TreeDataProvider.getChildren()함수를 사용하는거나 모든 자손의 행을 가져오는 TreeDataProvider.getDescendants()함수를 사용하는 방법이 있습니다.

Tree Model관련 함수에서 부모를 지칭하는 rowId 매개변수를 -1로 지정할 수 있습니다.
이때 -1은 보이지 않는 Root 행을 의미 합니다. getChildren(-1)이면 최상위에 존재하는 행들을 가져옵니다.

TreeDataProvider.getChildren(rowId)
지정한 행의 모든 자식 행들의 rowId를 가져옵니다.

TreeDataProvider.getChildCount(rowId)
지정한 행의 모든 자식 행들의 갯수를 가져옵니다.

TreeDataProvider.getDescendants(rowId)
지정한 행의 모든 자손 행들의 rowId를 가져옵니다.

TreeDataProvider.getDescendantCount(rowId)
지정한 행의 모든 자손 행들의 갯수를 가져옵니다.

헹에 모든 조상 행들의 RowId를 가져오는 방법으로는 TreeDataProvider.getAncestors()함수를 지원하고 있습니다.

TreeDataProvider.getAncestors(rowId)
지정한 행의 모든 조상행의 rowId를 가져옵니다.

실습에서는 함수를 실행하면 반환되는 자식 또는 조상행들의 rowId값을 확인 해 보도록 하겠습니다.

실습

현재 선택되어 있는 셀의 CellIndex정보를 가져오는 GridBase.getCurrent()함수를 사용하여 매개변수 rowId에 지정하였습니다.

  1. btnGetChildren
    현재 선택된 행의 자식행들의 RowId를 alert으로 보여주는 코드입니다.

     function btnGetChildren(){
         var cur = treeView.getCurrent();
         var rowIds = dataProvider.getChildren(cur.dataRow);
         if(!rowIds) rowIds = "자식행이 없습니다."
         alert(rowIds);
     }
     
  2. btnGetChildCount
    현재 선택된 행의 자식행들의 갯수를 alert으로 보여주는 코드입니다.

     function btnGetChildCount(){
         var cur = treeView.getCurrent();
         var count = dataProvider.getChildCount(cur.dataRow);
         if(!count) count = "자식행이 없습니다."
         alert(count);
     }
     
  3. btnGetDescendants
    현재 선택된 행의 자손행들의 RowId를 alert으로 보여주는 코드입니다.

     function btnGetDescendants(){
         var cur = treeView.getCurrent();
         var rowIds = dataProvider.getDescendants(cur.dataRow);
         if(!rowIds) rowIds = "자식행이 없습니다."
         alert(rowIds);
     }
     
  4. btnGetDescendantCount
    현재 선택된 행의 자손행들의 갯수를 alert으로 보여주는 코드입니다.

     function btnGetDescendantCount(){
         var cur = treeView.getCurrent();
         var count = dataProvider.getDescendantCount(cur.dataRow);
         if(!count) count = "자식행이 없습니다."
         alert(count);
     }
     
  5. btnGetAncestors 현재 선택된 행의 조상행들의 갯수를 alert으로 보여주는 코드입니다.

     function btnGetAncestors(){
         var cur = treeView.getCurrent();
         var rowIds = dataProvider.getAncestors(cur.dataRow);
         if(!rowIds.length) rowIds = "부모가 없는 행입니다.";
         alert(rowIds);
     }
     

실행화면





전체 소스코드

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() {
	$("#btnGetChildren").click(btnGetChildren);
	$("#btnGetChildCount").click(btnGetChildCount);
	$("#btnGetDescendants").click(btnGetDescendants);
	$("#btnGetDescendantCount").click(btnGetDescendantCount);
	$("#btnGetAncestors").click(btnGetAncestors);
	
	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 btnGetChildren(){
	var cur = treeView.getCurrent();
	var rowIds = dataProvider.getChildren(cur.dataRow);
	if(!rowIds) rowIds = "자식행이 없습니다."
	alert(rowIds);
}

function btnGetChildCount(){
	var cur = treeView.getCurrent();
	var count = dataProvider.getChildCount(cur.dataRow);
	if(!count) count = "자식행이 없습니다."
	alert(count);
}

function btnGetDescendants(){
	var cur = treeView.getCurrent();
	var rowIds = dataProvider.getDescendants(cur.dataRow);
	if(!rowIds) rowIds = "자식행이 없습니다."
	alert(rowIds);
}

function btnGetDescendantCount(){
	var cur = treeView.getCurrent();
	var count = dataProvider.getDescendantCount(cur.dataRow);
	if(!count) count = "자식행이 없습니다."
	alert(count);
}
	
function btnGetAncestors(){
	var cur = treeView.getCurrent();
	var rowIds = dataProvider.getAncestors(cur.dataRow);
	if(!rowIds.length) rowIds = "부모가 없는 행입니다.";
	alert(rowIds);
}
</script>
HTML
1. <input type="button" class="btn btn-primary btn-xs" id="btnGetChildren" value="선택한 행의 자식들의 RowId를 알림창으로 알려줍니다." />
<br/>
2. <input type="button" class="btn btn-primary btn-xs" id="btnGetChildCount" value="선택한 행의 자식들의 갯수를 알림창으로 알려줍니다." />
<br/>
3. <input type="button" class="btn btn-primary btn-xs" id="btnGetDescendants" value="선택한 행의 자손들의 RowId를 알림창으로 알려줍니다." />
<br/>
4. <input type="button" class="btn btn-primary btn-xs" id="btnGetDescendantCount" value="선택한 행의 자손들의 갯수를 알림창으로 알려줍니다." />
<br/>
5. <input type="button" class="btn btn-primary btn-xs" id="btnGetAncestors" value="선택한 행의 조상들의 RowId를 알림창으로 알려줍니다." />

<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지


API 참조