AUISoft에이유아이소프트
다운로드 센터 온라인 견적서 출력
데모 본문으로 이동

그리드의 헤더를 계층형(hierarchy)으로 표현합니다.

일반 그리드 헤더 데모와 현재 데모의 columnLayout 를 비교하면 계층 구조로 작성된 것을 확인 할 수 있습니다.

계층형 헤더는 칼럼 레이아웃에서 children 속성을 추가하고 그 안에 다음과 같이 하위 헤더를 정의합니다.

또한 칼럼 수가 많아 보기 좋게 고정 칼럼(fixedColumns)를 적용한 모습입니다.

const columnLayout = [{
    ...
    headerText: "1분기",
    children: [{
        dataField: "p1201",
        headerText: "1월",
        dataType: "numeric"
    }, {
        dataField: "p1202",
        headerText: "2월",
        dataType: "numeric",
        headerTooltip: { // 헤더 툴팁 표시 HTML 양식
            show: true,
            tooltipHtml: '<div><p>Just an incredibly simple <span style="color:#F29661;">AUIGrid</span></p></div>'
        }
    }, {
        dataField: "p1203",
        headerText: "3월",
        dataType: "numeric"
    }] // end of 1분기 children
    }, {
    ...