SMART datagrid v1.4 > Examples

Back  Forward

Hello Tree  Example
no-lite

SMART datagrid 모듈에 속하는 트리뷰 콤포넌트는 논리적으로 부모 자식의 계층적 관계를 갖는 데이타행들을 보이게 하거나 다루는 UI 툴이다. 계층적 관계를 제외하고는 그리드뷰와 동일하다. 

(예제 실행을 위해 SMARTdatagrid 스크립트 등이 준비돼야 한다. 제품 설치 및 준비 페이지를 참조한다) 

즉 , 의 트리뷰는 데이타셋과 계층적으로 연결된 데이타행을 표시하며, 데이타열은 데이타셋의 필드들의 수만큼의 DataField 값을 갖는다. 또, 트리뷰는 하나 이상의 컬럼으로 구성되고, 각 컬럼은 데이터셋의 필드에 연결된다. 결국 그리드행과 마찬가지로 트리뷰의 각 은 그 컬럼들에 연결된 데이터행의 필드 값을 표시하는 데이터셀들로 만들어진다. 

실행 시간 데이터필드 셋과 컬럼 셋만 정의된 채 비어있는 트리뷰를 데이터행을 추가하면서 구성하는 것도 당연히 가능한 일이지만, 대개는 초기화된 데이터셋으로 부터 출발하게 된다. 텍스트 파일로 존재하는 외부 데이터소스로 부터 데이터셋을 초기화하는 방법은 Load Tree Data 예제 토픽을 참조한다. Http 서버로 부터 전달되는 데이터셋도 텍스트이므로 대개는 동일하게 적용할 수 있다. 

또, 트리 데이터셋에 대한 예제도 참조한다. 

Tree - 1
rows

위 트리뷰는 아래와 같은 배열로 부터 데이터셋을 초기화한 것이다. 

Code -1
    var rows = [
        [0,"1","IBRD00010","France","4.25","USD","P037383","250","000","001.00","11/01/1952","05/01/1977"],
        [0,"1.1","IBRD00020","Netherlands","4.25","USD","P037452","191","044","211.75","04/01/1952","10/01/1972"],
        [0,"1.2","IBRD00021","Netherlands","4.25","USD","P037452","3","955","788.25","04/01/1953","04/01/1954"],
        [0,"1.2.1","IBRD00030","Denmark","4.25","USD","P037362","40","000","000.00","02/01/1953","08/01/1972"],
        [0,"1.2.2","IBRD00040","Luxembourg","4.25","USD","P037451","12","000","000.00","07/15/1949","07/15/1972"],
        ...
        [1,"2","IBRD00060","Chile","3.75","USD","P006577","2","500","000.00","07/01/1950","01/01/1955"],
        [1,"2.1","IBRD00070","Netherlands","3.56","USD","P037453","2","000","000.00","01/15/1949","07/15/1958"],
        ...
        [2,"3","IBRD00100","Netherlands","3.56","USD","P037456","2","000","000.00","01/15/1949","07/15/1958"],
        ...
    ];

배열을 트리 구조로 구성하기 위해서는 각 행에 트리 정보가 들어 있는 값이 필요하다. 위 예제에서는 두 번째 'tree' 필드가 데이터셋의 treeField로 사용된다. 트리 필드 값은 문자열이어야 하고, 현재 행 값의 앞 부분과 동일한 값을 갖는 이전 행을 찾아서 그 행의 자식행으로 추가한다. 이전 행이 없다면 최상위 데이터행이 된다. 

트리 값으로 사용된 항목들은 기본적으로는 데이터셋에 추가되지 않지만, TreeDataSet.setRows 호출 시 useTreeField 매개변수를 true로 지정하고, setFields로 필드 목록 설정 시 해당 항목을 필드로 추가하면 된다. 

Code -2
    // 세 번째 매개변수가 두번째 매개변수로 지정한 tree field를 실제 데이터필드로 사용하겠다는 것.
    dsMain.setRows(rows, 1, true);

예제 각 행의 첫번째 값은 iconIndex로 쓰인다. iconIndex는 데이터셋의 값이 아니라 트리뷰에서 사용되는 값인데, 데이터소스 쪽에서 보관하는 경우도 있을 수 있다. 트리행의 icon을 지정하는 방법은 TreeRow.iconIndex 속성 값을 직접 지정하거나, TreeOptions.iconCallback 콜백 함수를 지정하는 것이다. 만일 이 예제와 같이 데이터셋 쪽에 아이콘 값이 들어 있다면, TreeOptions.iconField 속성으로 지정해서 그 값을 사용할 수 있다. 

그러나, 일단 TreeRow.iconIndexundefined가 아닌 값이 설정되면 다른 것들은 무시한다. 

Code -3
    tree.setOptions{
        iconCallback: function (row) {
            var idx = row.iconIndex();
            if (idx === undefined) {
                switch (row.getValue('country')) {
                    case 'France': 
                        idx = 'fr.png';
                        break;
                    ...
                    default:
                        idx = 0;
                        break;
                }
                row.setIconIndex(idx);
            }
            return idx;
        },
        ...
    });

소스보기 JSP 

See Also
트리 개요
TreeView
TreeDataSet
Examples
트리 데이터셋 예제
Load Tree Data