TreeDataGrid
Openzet.org
목차 |
소개
트리 필드들을 배열로 받은 상태에서 ArrayCollection을 데이터 프로바이더로 받거나 GroupingCollection을 데이터 프로바이더로 받아서 treeDirection 속성의 값에 따라 상하 또는 좌우 형태의 트리 계층형 데이터를 보여주는 커스텀 데이터그리드 컴포넌트이다.
속성
treeFields TreeDataGrid의 트리 필드들을 배열 형태로 지정하는 속성이다. 트리 필드는 데이터 프로바이더에서 제공되는 데이터 필드 중 하나 이상의 필드를 문자열로 지정한다.
treeDirection 트리의 방향을 보여주는 속성이다. 디폴트 값은 vertical이고 지정할 수 있는 값은 vertical과 horizontal의 두 문자열 값 중 하나이다.
사용법
TreeDataGrid의 dataProvider로는 treeFields 속성을 지정한 상태에서 ArrayCollection을, treeFields를 지정하거나 지정하지 않은 상태에서 GroupingCollection 객체를 사용할 수 있다. TreeDataGrid는 treeDirection 속성의 값에 따라 좌측에서 우측으로 컬럼이 동적으로 늘어나며 OLAP 형태의 좌우 트리형 데이터 그리드를 생성하거나 일반 AdvancedDataGrid와 같은 상하형 트리 데이터 그리드를 만들어 준다.
<zet:TreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700">
<zet:columns>
<mx:DataGridColumn dataField="planet"
headerText="planet" >
<mx:itemRenderer>
<mx:Component>
<dataGridClasses:DataGridTreeItemRenderer />
</mx:Component>
</mx:itemRenderer> </mx:DataGridColumn>
<mx:DataGridColumn dataField="kind" headerText="kind" />
<mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
<mx:DataGridColumn dataField="moons" headerText="moons" />
</zet:columns>
</zet:TreeDataGrid>
TreeDataGrid를 사용할 때에는 데이터그리드 컬럼에 DataGridTreeItemRenderer를 사용해야 합니다.
treeDirection 속성을 사용하면 트리 형태를 상하 또는 좌우로 선택해 볼 수 있습니다. 상하형 트리를 원할 경우에는, treeDirection 속성을 다음과 같이 vertical로 지정하면 되고
<zet:TreeDataGrid
id="dg" treeDirection="vertical" treeFields="{['planet','kind']}"
width="700" />
좌우 트리를 원할 경우에는 treeDirection을 horizontal로 지정하면 된다.
<zet:TreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700" />
TreeDataGrid의 dataProvider 속성으로는 다음과 같이 GroupingCollection 객체를 사용할 수도 있고
var g:Grouping = new Grouping();
g.fields = [new GroupingField("planet"), new GroupingField("kind")];
gc.source = new ArrayCollection(planets);
gc.grouping = g;
gc.refresh();
dg.dataProvider = gc;
다음과 같이 treeFields 속성에 배열 형태로 트리 필드들을 지정한 상태에서
<zet:TreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700" />
다음과 같은 ArrayCollection 객체를 바인딩시킬 수도 있다. 이 경우, TreeDataGrid는 내부적으로 treeFields 배열의 값과 ArrayCollection 객체를 가지고 동적으로 GroupingCollection을 만들어 데이터그리드에 바인딩시키게 된다.
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
TreeDataGrid 클래스는 ITreeDataGrid 인터페이스를 구현하고 있다. ITreeDataGrid 인터페이스에는 다음의 메서드들이 정의되어 있습니다.
package org.openzet.controls.dataGridClasses
{
/**
* Interface that defines methods needed for a DataGrid showing data in a tree hierarchy.
*
**/
public interface ITreeDataGrid
{
/**
* Method to collapse tree Item
*
* @param item Any node item object
* @param dataField The datafield of the current column
**/
function collapseTreeItem(item:Object, dataField:String = null):void;
/**
* Method to expand tree Item
*
* @param item Any node item object
* @param dataField The datafield of the current column
**/
function expandTreeItem(item:Object, dataField:String = null):void;
/**
* A getter method to return tree column's dataField when treeDirection is set as vertical.
**/
function get treeColumnField():String;
/**
* @private
**/
function set treeDirection(value:String):void;
/**
* Setter/getter method to define tree view direction.
**/
function get treeDirection():String;
}
}
ITreeDataGrid 인터페이스를 구현하는 클래스는 TreeDataGrid 클래스와 AdvancedTreeDataGrid 클래스이며, 이들 클래스는 DataGridTreeItemRenderer 아이템 렌더러를 사용해 트리 형태의 데이터를 표현하고 있고 이 둘의 관계는 ITreeDataGrid 인터페이스를 통해 설정된다.
AdvancedTreeDataGrid 클래스와 TreeDataGrid 클래스의 차이점은 전자가 AdvancedDataGrid를 상속하고 후자가 일반 DataGrid 클래스를 상속한다는 점 외에는 차이가 없다.
애플리케이션 예제
TreeDataGrid에 대한 전체 예제 소스 코드는 다음과 같다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:zet="org.openzet.controls.*" layout="vertical"
creationComplete="onCreationComplete();" xmlns:dataGridClasses="org.openzet.controls.dataGridClasses.*">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
import mx.utils.ObjectUtil;
import mx.utils.ObjectProxy;
import mx.collections.HierarchicalCollectionView;
import mx.collections.IHierarchicalCollectionView;
import mx.collections.SummaryField;
import mx.collections.ArrayCollection;
import mx.collections.Grouping;
import mx.collections.GroupingCollection;
import mx.collections.GroupingField;
import mx.collections.ICollectionView;
import mx.controls.AdvancedDataGrid;
import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer
import mx.controls.OLAPDataGrid;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
private var gc:GroupingCollection = new GroupingCollection();
public function onCreationComplete():void
{
var g:Grouping = new Grouping();
g.fields = [new GroupingField("planet"), new GroupingField("kind")];
gc.source = new ArrayCollection(planets);
gc.grouping = g;
gc.refresh();
dg2.dataProvider = gc;
dg3.dataProvider = new ArrayCollection(planets);
dg.dataProvider = dpFlat;
}
]]>
</mx:Script>
<mx:Array id="planets">
<mx:Object planet="Mercury" kind="Terrestrial"
year_duration="0.24" moons="0" cost="1250" />
<mx:Object planet="Venus" kind="Terrestrial"
year_duration="0.62" moons="0" cost="2400" />
<mx:Object planet="Jupiter" kind="Gas giant"
year_duration="11.86" moons="63" cost="500" />
<mx:Object planet="Neptune" kind="Gas giant"
year_duration="164.8" moons="13" cost="3000" />
<mx:Object planet="Ceres" kind="Ice dwarf"
year_duration="4.60" moons="0" cost="4000" />
<mx:Object planet="Pluto" kind="Ice dwarf"
year_duration="248.09" moons="3" cost="4500" />
<mx:Object planet="Eris" kind="Ice dwarf"
year_duration="557" moons="1" cost="3000" />
</mx:Array>
<zet:AdvancedTreeDataGrid
id="dg" treeDirection="horizontal" treeFields="{['Region','Territory']}"
width="700">
<zet:columns>
<mx:AdvancedDataGridColumn dataField="Region"
headerText="Region" >
<mx:itemRenderer>
<mx:Component>
<dataGridClasses:DataGridTreeItemRenderer />
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn dataField="Territory" headerText="Territory" />
<mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory_Rep" />
<mx:AdvancedDataGridColumn dataField="Actual" headerText="Actual" />
<mx:AdvancedDataGridColumn dataField="Estimate" headerText="Estimate" />
</zet:columns>
</zet:AdvancedTreeDataGrid>
<zet:TreeDataGrid
id="dg2" treeDirection="horizontal" treeFields="{['planet','kind']}"
width="700">
<zet:columns>
<mx:DataGridColumn dataField="planet"
headerText="planet" >
<mx:itemRenderer>
<mx:Component>
<dataGridClasses:DataGridTreeItemRenderer />
</mx:Component>
</mx:itemRenderer> </mx:DataGridColumn>
<mx:DataGridColumn dataField="kind" headerText="kind" />
<mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
<mx:DataGridColumn dataField="moons" headerText="moons" />
</zet:columns>
</zet:TreeDataGrid>
<zet:ZetDataGrid
id="dg3" treeDirection="vertical" treeFields="{['planet','kind']}"
width="700">
<zet:columns>
<mx:DataGridColumn dataField="planet"
headerText="planet" >
<mx:itemRenderer>
<mx:Component>
<dataGridClasses:DataGridTreeItemRenderer />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="kind" headerText="kind" />
<mx:DataGridColumn dataField="year_duration" headerText="year_duration" />
<mx:DataGridColumn dataField="moons" headerText="moons" />
</zet:columns>
</zet:ZetDataGrid>
</mx:Application>
애플리케이션 실행 결과 :
