들어가며

이번 강좌에서는 API를 사용하여 트리뷰(TreeView)의 노드를 접거나 펼치도록 조작하는 방법에 대해 배워보겠습니다.

이론

사용자가 노드의 정보를 가지고 있는 컬럼의 Expander(+/- 아이콘)를 클릭하여 하위 노드의 행을 화면에 표시 할 수 있지만 데이터가 로드된 후 또는 특정 값을 검색한 다음 해당 노드를 접거나 펼치고자 할때는 코드를 통해 Expander를 조작할 필요가 있습니다.

Expander를 코드로 조작하기 위해 다음과 같은 API를 지원합니다.

TreeView.expand(itemIndex, recursive, force)
입력된 아이템을 확장하는 함수 입니다.

  • itemIndex : 확장 하려는 아이템의 index를 지정합니다.
  • recursive : true를 지정하면 자식아이템까지 모두 확장합니다.
  • force : true 입력하면 확장되어 있는 아이템의 닫혀있는 자식아이템을 모두 확장합니다.

TreeView.expandAll(level)
모든 아이템을 확장하는 함수입니다.

  • level : 확장 하려는 노드의 Level값을 지정하면 해당 Level까지만 확장 됩니다.
    값이 없으면 모든 아이템을 확장합니다.

TreeView.collapse(itemIndex, recursive)
입력된 아이템을 축소하는 함수 입니다.

  • itemIndex : 축소 하려는 아이템의 index를 지정합니다.
  • recursive : true를 지정하면 자식아이템까지 모두 축소합니다.

TreeView.collapseAll()
모든 아이템을 축소하는 함수입니다.

그리고 expander를 확장하거나 축소할때 선처리나 후처리를 위해 expander가 동작될때 발생하는 이벤트 함수에 대해 알아 보겠습니다.

TreeView.onTreeItemExpanding
TreeView의 아이템 노드가 펼쳐지기 직전에 호출됩니다.

TreeView.onTreeItemExpanded
TreeView의 아이템 노드가 펼쳐진 후에 호출됩니다.

TreeView.onTreeItemCollapsing
TreeView의 아이템 노드가 접히기 직전에 호출됩니다.

TreeView.onTreeItemCollapsed
TreeView의 아이템 노드가 접힌 후에 호출됩니다.

실습에서 펼쳐지기 직전의 아래행의 RowId와 펼쳐진 후 아래행의 RowId 정보로 이벤트의 발생 시점을 확인해 보겠습니다.
expandAll이나 collapseAll함수의 경우 숨겨진 루트의 값이 리턴되므로 이벤트 함수의 결과값에서 제외 하였습니다.
숨겨진 루트노드에 대한 설명은 b9-1강좌에 소개 되었습니다.

실습

  1. expand
    현재 선택되어 있는 행을 TreeView.expand()함수를 사용하여 Expander를 확장 할 수 있습니다.

     function expand(){
     var cur = treeView.getCurrent();
     treeView.expand(cur.itemIndex);
 }

  2. expandRecursive
    recursive를 true지정하면 자손의 아이템도 확장됩니다.

     function expandRecursive(){
     var cur = treeView.getCurrent();
     treeView.expand(cur.itemIndex,true);
 }

  3. expandRecursiveForce
    force를 true로 지정하면 이미 확장되어 있는 아이탬의 자손아이템이 축소되어 있는 경우 확장 할 수 있습니다.

     function expandRecursiveForce(){
     var cur = treeView.getCurrent();
     treeView.expand(cur.itemIndex,true,true);
 }

  4. collapse
    현재 선택되어 있는 행을 TreeView.collapse()함수를 사용하여 Expander를 축소 할 수 있습니다.

     function collapse(){
     var cur = treeView.getCurrent();
     treeView.collapse(cur.itemIndex);
 }

  5. collapseRecursive
    recursive를 true지정하면 자손의 아이템도 같이 축소됩니다.

     function collapse(){
     var cur = treeView.getCurrent();
     treeView.collapse(cur.itemIndex,true);
 }

  6. expandAll
    TreeView.expandAll()함수를 사용하여 전체 아이템을 확장 할 수 있습니다.

     function expandAll(){
     treeView.expandAll();
 }

  7. expandAllLev1
    파라메터로 확장 하려는 노드의 Level값을 지정하면 해당 Level까지만 확장됩니다.

     function expandAllLev1(){
     treeView.expandAll(1);
 }

  8. collapseAll
    TreeView.collapseAll()함수를 사용하여 전체 아이템을 축소 할 수 있습니다.

     function collapseAll(){
     treeView.collapseAll();
 }

실행화면


  2. 선택한 아이템만 확장되고 자손의 아이템은 확장되지 않은 상태를 확인할 수 있습니다.


  5. 마우스로 직접 루트노드 Expander를 클릭하여 아이템을 확장해 보면 자손 아이템은 축소되지 않은걸 확인 할 수 있습니다.




  10. 8번의 버튼을 클릭하여 모든 아이템을 축소합니다.

focus item onTreeItemExpanding
onTreeItemCollapsing		 onTreeItemExpanded
onTreeItemCollapsed
ItemIndex : RowId : 확장/축소 직전 아래행의 RowId : 확장/축소 후 아래행의 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() {
	$("#btnExpand").click(expand);
	$("#btnCollapse").click(collapse);
	$("#btnExpandRecursive").click(expandRecursive);
	$("#btnExpandRecursiveForce").click(expandRecursiveForce);
	$("#btnCollapseRecursive").click(collapseRecursive);
	$("#btnExpandAll").click(expandAll);
	$("#btnExpandAllLev1").click(expandAllLev1);
	$("#btnCollapseAll").click(collapseAll);
	
	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"
	}]);
	
	treeView.onTreeItemExpanding = function(tree, itemIndex, rowId){
		var underRowId = tree.getDataRow(itemIndex + 1);
		$("#pre").text("확장 직전 아래행의 RowId : "+underRowId);
	}
	
	treeView.onTreeItemExpanded = function(tree, itemIndex, rowId){
		if(itemIndex < 0){
			$("#pre").text("전체 확장은 제외");
			$("#then").text("");
			return false;
		}
		var underRowId = tree.getDataRow(itemIndex + 1);
		$("#then").text("확장 후 아래행의 RowId : "+underRowId);
	}
	
	treeView.onTreeItemCollapsing = function(tree, itemIndex, rowId){
		var underRowId = tree.getDataRow(itemIndex + 1);
		$("#pre").text("축소 직전 아래행의 RowId : "+underRowId);
	}
	
	treeView.onTreeItemCollapsed = function(tree, itemIndex, rowId){
		if(itemIndex < 0){
			$("#pre").text("전체 축소는 제외");
			$("#then").text("");
			return false;
		}
		var underRowId = tree.getDataRow(itemIndex + 1);
		$("#then").text("축소 후 아래행의 RowId : "+underRowId);
	}
	
	treeView.onCurrentRowChanged = function(grid, newIndex){
		$("#current").find("span").text(JSON.stringify(newIndex));
	}
	
	dataProvider.setRows(json,"tree");
});

function expand(){
	var cur = treeView.getCurrent();
	treeView.expand(cur.itemIndex);
}

function collapse(){
	var cur = treeView.getCurrent();
	treeView.collapse(cur.itemIndex);
}

function expandRecursive(){
	var cur = treeView.getCurrent();
	treeView.expand(cur.itemIndex,true);
}

function expandRecursiveForce(){
	var cur = treeView.getCurrent();
	treeView.expand(cur.itemIndex,true,true);
}

function collapseRecursive(){
	var cur = treeView.getCurrent();
	treeView.collapse(cur.itemIndex,true);
}

function expandAll(){
	treeView.expandAll();
}

function expandAllLev1(){
	treeView.expandAll(1);
}

function collapseAll(){
	treeView.collapseAll();
}
</script>
HTML
1. <input type="button" class="btn btn-primary btn-xs" id="btnExpand" value="선택한 행의 아이템을 확장합니다." /> <br/>
2. 선택한 아이템만 확장되고 자손의 아이템은 확장되지 않은 상태를 확인할 수 있습니다.
3. <input type="button" class="btn btn-primary btn-xs" id="btnExpandRecursiveForce" value="force값을 true로 지정하여 자손의 아이템을 확장합니다." /> <br/>
4. <input type="button" class="btn btn-primary btn-xs" id="btnCollapse" value="확장되어 있는 루트노드를 선택하여 축소합니다." /> <br/>
5. 마우스로 직접 루트노드 Expander를 클릭하여 아이템을 확장해 보면 자손 아이템은 축소되지 않은걸 확인 할 수 있습니다.
6. <input type="button" class="btn btn-primary btn-xs" id="btnCollapseRecursive" value="recursive를 true로 지정하여 자손행도 축소합니다." /> <br/>
7. <input type="button" class="btn btn-primary btn-xs" id="btnExpandRecursive" value="모든 아이템이 닫혀 있는 상태에 Expand에 Recursive를 true로 지정하면 자손의 아이템도 모두 확장 할 수 있습니다.." /> <br/>
8. <input type="button" class="btn btn-primary btn-xs" id="btnCollapseAll" value="CollapseAll함수를 사용하여 전체 아이템을 축소합니다." /> <br/>
9. <input type="button" class="btn btn-primary btn-xs" id="btnExpandAll" value="ExpandAll함수를 사용하여 전체 아이템을 확장합니다." /> <br/>
10. 8번의 버튼을 클릭하여 모든 아이템을 축소합니다.
11. <input type="button" class="btn btn-primary btn-xs" id="btnExpandAllLev1" value="ExpandAll에 Level값을 지정하여 루트노드의 아이템만 확장합니다다." /> <br/>
<div id="realgrid" style="width: 100%; height: 200px;"></div>
<table style="width: 100%;">
	<tr>
		<th>focus item</th>
		<th>onTreeItemExpanding  <br/>
		onTreeItemCollapsing</th>
		<th>onTreeItemExpanded  <br/>
		onTreeItemCollapsed</th>
	</tr>
	<tr id="current">
		<td>ItemIndex : <span id="itemIndex"></span> RowId : <span id="dataRow"></span></td>
		<td id="pre" >확장/축소 직전 아래행의 RowId : </td>
		<td id="then">확장/축소 후 아래행의 RowId : </td>
	</tr>
</table>

관련 데모 페이지

API 참조