ZetDataGrid
Openzet.org
목차 |
소개
SelectionDataGrid 클래스를 상속하고 IZetDataGrid 인터페이스를 구현한 클래스로서 손쉬운 데이터 필터링 기능을 제공하는 enableFilter 속성과 데이터 그리드 row의 머지 기능을 구현한 커스텀 컴포넌트이다.
이 클래스는 SelectionDataGrid 클래스와 TreeDataGrid 클래스의 자손(descendent) 클래스로서 TreeDataGrid 클래스에서 구현하고 있는 트리 형태의 데이터 그리드 생성과 SelectionDataGrid 클래스에서 구현하고 있는 셀의 마우스 드래그 선택 및 데이터 추출 기능을 모두 제공하고 있다. 하지만 이 문서가 쓰여지는 현재 시점에서, enableDragSelection 속성은 머지된 셀에 대해서는 제대로 작동하지 않는 알려진 버그가 있습니다.
이 클래스에서는 enableFilter라는 속성을 통해 데이터그리드의 헤더에 엑셀 2007에서 구현하고 있는 체크박스 형태의 다중 데이터 필터링 기능을 구현하고 있다. enableFilter 속성이 true이면, ZetDataGrid 는 내부적인 알고리즘을 통해 동적으로 각 컬럼의 headerRenderer를 FilterItemRenderer로 설정해 준다.
이 클래스를 사용해 컬럼의 데이터를 머지시키기 위해서는 항상 ZetDataGridColumn 컬럼을 사용해야 한다. ZetDataGridColumn 컬럼은 IMergeable 인터페이스에 정의된 enableMerge setter/getter 메서드를 구현하고 있습니다.
속성
enableFilter 데이터그리드의 헤더에 엑셀 형태의 데이터 필터링 기능을 구현하는 헤더 렌더러를 사용할 지 여부를 지정하는 속성이다. 디폴트 값은 false이다.
사용법
사용 방식은 ZetDataGridColumn라는 커스텀 데이터그리드 컬럼을 사용한다는 것을 제외하고는 일반 데이터그리드와 별반 다르지 않다. 아울러 enableFilter 속성을 true로 하면 mxml을 통해 또는 액션스크립트를 통해 동적으로 데이터그리드의 헤더에 데이터 필터링 기능을 적용할 수 있다. enableFilter 속성의 디폴트 값은 false이다.
다음은 ZetDataGrid의 데이터 필터링 기능을 사용하고 각 컬럼에 대해 머지 기능을 활성화시킨 컴포넌트 설정의 예제 코드이다.
<zet:ZetDataGrid id="dg" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:ZetDataGrid>
ZetDataGridColumn 컬럼에는 checked 라는 속성이 정의되어 있다. 특정 ZetDataGridColumn 컬럼에 대해 이 속성을 true로 설정하면, 해당 컬럼의 헤더와 컬림에 속하는 셀들에는 체크박스가 각각 headerRenderer와 itemRenderer로 설정된다. 이 때 사용되는 컬럼의 헤더 렌더러는 DataGridHeaderCheckBox 클래스이고, 컬럼의 아이템 렌더러는 DataGridCheckBoxRenderer 클래스로, 이러한 렌더러 설정은 ZetDataGrid 클래스에서 ZetDataGridColumn 컬럼의 속성을 검사해 내부적으로 런타임시에 설정해 준다.
다음은 이에 대한 예제 코드이다.
<controls:ZetDataGrid id="dg" dataProvider="{arr}" draggableColumns="true">
<controls:columns>
<dataGridClasses:ZetDataGridColumn dataField="A" />
<dataGridClasses:ZetDataGridColumn dataField="B" />
<dataGridClasses:ZetDataGridColumn dataField="selected" checked="true" />
</controls:columns>
</controls:ZetDataGrid>
이 때 selected 필드의 값은 반드시 Boolean 타입의 값을 가지고 있어야 한다(true/false).
애플리케이션 예제
다음은 ZetDataGrid 클래스와 관련된 애플리케이션 예제 코드이다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:local="*"
xmlns:zet="org.openzet.controls.*"
xmlns:aZetColumn="org.openzet.controls.advancedDataGridClasses.*"
xmlns:zetColumn="org.openzet.controls.dataGridClasses.*"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ListCollectionView;
import mx.charts.series.ColumnSeries;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{A:10, B:20, C:30},
{A:20, B:20, C:30},
{A:20, B:30, C:30},
{A:20, B:30, C:30},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:30, B:30, C:40},
{A:10, B:20, C:40},
{A:10, B:20, C:30}]);
]]>
</mx:Script>
<zet:AdvancedZetDataGrid id="dg" enableFilter="true" fontSize="24" verticalAlign="bottom" paddingTop="4"
paddingBottom="4" sortableColumns="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%"
dataProvider="{arr}">
<zet:columns>
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="A" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="B" />
<aZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:AdvancedZetDataGrid>
<zet:ZetDataGrid id="dg2" enableFilter="true" horizontalGridLineColor="0xcccccc" horizontalGridLines="true" height="100%" dataProvider="{arr}">
<zet:columns>
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="A" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="B" />
<zetColumn:ZetDataGridColumn enableMerge="true" dataField="C" />
</zet:columns>
</zet:ZetDataGrid>
</mx:Application>
예제 실행 결과
