AdvancedZetDataGrid

Openzet.org

목차 1 소개 2 속성 3 사용법 4 애플리케이션 예제

소개

• 주요기능
  • DataGrid row merge 기능
  • DataGrid cell의 마우스 드래그 선택 및 데이터 추출 기능
  • Tree 형태의 데이터 그리드 생성
  • enableFilter속성을 통한 Excel 2007과 동일한 체크박스 형태의 데이터 필터링

• 구현형태
  • AdvancedSelectionDataGrid 클래스 상속
  • IZetDataGrid 인터페이스 구현

AdvancedSelectionDataGrid 클래스를 상속하고 IZetDataGrid 인터페이스를 구현한 클래스로서 손쉬운 데이터 필터링 기능을 제공하는 enableFilter 속성과 데이터 그리드 row의 머지 기능을 구현한 커스텀 컴포넌트이다.

이 클래스는 AdvancedSelectionDataGrid 클래스와 AdvancedTreeDataGrid 클래스의 자손(descendent) 클래스로서 AdvancedTreeDataGrid 클래스에서 구현하고 있는 트리 형태의 데이터 그리드 생성과 AdvancedSelectionDataGrid 클래스에서 구현하고 있는 셀의 마우스 드래그 선택 및 데이터 추출 기능을 모두 제공하고 있다. 하지만 이 문서가 쓰여지는 현재 시점에서, enableDragSelection 속성은 머지된 셀에 대해서는 제대로 작동하지 않는 알려진 버그가 있다.

이 클래스에서는 enableFilter라는 속성을 통해 데이터그리드의 헤더에 엑셀 2007에서 구현하고 있는 체크박스 형태의 다중 데이터 필터링 기능을 구현하고 있다. enableFilter 속성이 true이면, AdvancedZetDataGrid 는 내부적인 알고리즘을 통해 동적으로 각 컬럼의 headerRenderer를 FilterItemRenderer로 설정해 준다.

이 클래스를 사용해 컬럼의 데이터를 머지시키기 위해서는 항상 AdvancedZetDataGridColumn 컬럼을 사용해야 한다. AdvancedZetDataGridColumn 컬럼은 IMergeable 인터페이스에 정의된 enableMerge setter/getter 메서드를 구현하고 있다.

속성

• enableFilter

데이터그리드의 헤더에 엑셀 형태의 데이터 필터링 기능을 구현하는 헤더 렌더러 사용 여부. 디폴트 값 false

사용법

사용 방식은 AdvancedZetDataGridColumn사용한다는 것을 제외하고는 일반 데이터그리드와 유사하다.
아울러 enableFilter 속성을 true로 하면 mxml또는 액션스크립트를 통해 동적으로 데이터그리드의 헤더에 데이터 필터링 기능을 적용할 수 있다.

다음은 ZetDataGrid의 데이터 필터링 기능을 사용하고 각 컬럼에 대해 머지 기능을 활성화시킨 컴포넌트 설정의 예제 코드이다.

<zet:AdvancedZetDataGrid 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:AdvancedZetDataGrid>

AdvancedZetDataGridColumn 컬럼에는 checked 라는 속성이 정의되어 있다. 특정 AdvancedZetDataGridColumn 컬럼에 대해 이 속성을 true로 설정할경우 해당 컬럼의 헤더와 컬림에 속하는 셀들에는 체크박스가 각각 headerRenderer와 itemRenderer로 설정된다.
이 때 사용되는 컬럼의 헤더 렌더러는 DataGridHeaderCheckBox 클래스이고, 컬럼의 아이템 렌더러는 DataGridCheckBoxRenderer 클래스로 이러한 렌더러 설정은 AdvancedZetDataGrid 클래스에서 AdvancedZetDataGridColumn 컬럼의 속성을 검사해 내부적으로 런타임시에 설정해 준다.

다음은 이에 대한 예제 코드이다.

<controls:AdvancedZetDataGridid="dg" dataProvider="{arr}" draggableColumns="true">
    <controls:columns>
        <dataGridClasses:AdvancedZetDataGridColumn dataField="A" />
        <dataGridClasses:AdvancedZetDataGridColumn dataField="B" />
        <dataGridClasses:AdvancedZetDataGridColumn dataField="selected" checked="true"  />
    </controls:columns>
</controls:AdvancedZetDataGrid>

이 때 selected 필드의 값은 반드시 Boolean 타입의 값을 가지고 있어야 한다(true/false).

애플리케이션 예제

다음은 AdvancedZetDataGrid 클래스와 관련된 애플리케이션 예제 코드이다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:zet="org.openzet.controls.*"
    xmlns:ZetColumn="org.openzet.controls.advancedDataGridClasses.*"
    xmlns:zetColumn="org.openzet.controls.dataGridClasses.*"
    layout="horizontal" xmlns:local="*"
    >
    <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>
            <ZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="A" />
            <ZetColumn:AdvancedZetDataGridColumn enableMerge="true" dataField="B" />
            <ZetColumn: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>

예제 실행 결과