AUIPivot

이 컨트롤은 무엇인가요?

AUIPivot.js는 AUIGrid와 같은 벤더가 제공하는 피벗 테이블 전용 컨트롤입니다. syn.uicontrols.$auipivot 싱글턴 객체로 노출되며, 행/열/값/필터 필드를 드래그로 배치해서 다차원 집계 리포트를 만드는 데 특화되어 있습니다. 예전에는 WebGrid 폴더에 함께 있었지만 지금은 AUIPivot 폴더로 분리되었습니다.

AUIGrid와 같은 계열이지만, CRUD 그리드가 아니라 "행/열/값/필터 필드를 드래그로 배치하는 피벗 리포트" 전용 컨트롤이라는 점이 다릅니다. /lib/auigrid/dist/AUIGrid.js 벤더 스크립트가 필요합니다.

언제 사용하나요?

여러 값의 합계/평균 등을 행·열로 교차 집계해야 할 때(예: 지역별×분기별 매출 합계)
사용자가 행/열/값 필드를 직접 드래그해서 리포트 구성을 바꿔야 할 때
단순 목록/편집 그리드가 필요하다면 AUIGrid를 사용하세요. AUIPivot은 피벗 리포트 전용입니다.

빠른 시작

syn.loader.js에는 auipivot(→ syn_auipivot) 자동주입 케이스가 없으므로, AUIGrid와 같은 AUIGrid 벤더 스크립트를 pageLoadFiles 훅으로 직접 로드해야 합니다.

<syn_auipivot id="pvtSales" syn-options="{ height: 400 }"></syn_auipivot>
<script>
    function pageLoadFiles(styleFiles, jsFiles, templateFiles) {
        window.afterLoadFiles = [];
        afterLoadFiles.push('/lib/auigrid/dist/AUIGridLicense.js');
        afterLoadFiles.push('/lib/auigrid/dist/AUIGrid.js');
        afterLoadFiles.push('/uicontrols/AUIPivot/AUIPivot.css');
        afterLoadFiles.push('/uicontrols/AUIPivot/AUIPivot.js');
    }
</script>
<script src="/js/syn.loader.js"></script>

'use strict';
let $samplePage = {
    hook: {
        pageLoad() {
            syn.uicontrols.$auipivot.setValue('pvtSales', [
                { Region: '서울', Model: 'A', Total: 1000 },
                { Region: '부산', Model: 'B', Total: 800 }
            ]);
        }
    }
}

예제 실행하기

example/ 폴더의 HTML 파일을 handstack의 wwwroot 정적 서버(rdy 프로젝트) 경로 아래에 두고 브라우저로 열면 바로 동작을 확인할 수 있습니다.

auipivotbasic.html / .js : $auipivot 기본 피벗 리포트 구성(행/열/값 필드 배치)

각 예제는 화면 하단 로그 영역(syn.$l.eventLog 출력)에서 이벤트 발생 순서와 전달값을 확인할 수 있습니다.

더 알아보기

API 상세는 같은 폴더의 API.md를 참고하세요.
실제 소스: wwwroot/uicontrols/AUIPivot/AUIPivot.js, AUIPivot.css
로더 자동주입 정의 없음 — pageLoadFiles 훅으로 수동 주입 필요(위 "빠른 시작" 참고)
AUIPivot 벤더 공식 문서: https://www.auisoft.net/documentation/auipivot/

실전 예제 페이지

/uicontrols/AUIPivot/example/ 경로의 예제를 아래 iframe에서 바로 확인할 수 있습니다.

auipivotbasic.html

소스와 로드 파일

항목	내용
컨트롤	`AUIPivot`
전역 별칭	`syn.uicontrols.$auipivot`
소스	`uicontrols/AUIPivot/AUIPivot.js`
스타일	`uicontrols/AUIPivot/AUIPivot.css`

API 참조

싱글턴 객체: syn.uicontrols.$auipivot 소스 파일: wwwroot/uicontrols/AUIPivot/AUIPivot.js, wwwroot/uicontrols/AUIPivot/AUIPivot.css 내부 라이브러리: AUIPivot(AUIGrid와 같은 벤더의 피벗 전용 제품, /lib/auigrid/dist/AUIGrid.js 필요)

마크업

<syn_auipivot id="pvtSales" syn-options="{
    height: 400,
    layout: {
        rowFields: ['Region', 'Model'],
        columnFields: ['DateQuarter'],
        valueFields: [{ dataField: 'Total', operation: 'SUM', formatString: '#,##0' }],
        fieldAlias: { Region: '판매 지역', Model: '상품명', Total: '매출액', DateQuarter: '분기' }
    }
}" syn-events="['cellClick', 'sorting']"></syn_auipivot>

controlLoad 시 layout(rowFields/columnFields/valueFields/filterFields/fieldAlias/dateTypeField)을 읽어 AUIPivot.setRowFields/setColumnFields/setValueFields/setFilterFields/setFieldAlias/setDateTypeField를 순서대로 호출해 초기 배치를 구성합니다.
layout을 지정하지 않으면 소스에 내장된 예시 레이아웃(Region/Name/Model × DateQuarter/DateMonth × Total/Count 합계)이 기본값으로 사용됩니다.

Options (pivotOptions)

속성	기본값	설명
`layoutType`	`'tree'`	행 레이블 표시 방식
`showFooter`	`false`	하단 합계 영역
`showGrandTotalColumn`	`true`	총합계 열 표시
`showRowNumColumn`	`true`	행 번호 컬럼
`showSummaryColumn` / `showSummaryRow`	`true`	요약 열/행
`enableSorting` / `enableMultipleSorting`	`true`	정렬/다중 정렬 허용
`enableClipboard`	`true`	클립보드 복사
`useContextMenu` / `useContextHeaderMenu`	`false`	컨텍스트 메뉴
`useHeatmap`	`false`	히트맵 색상 표시(`defaultHeatmapColors: ['#FFFFFF', '#4374D9']`)
`movableFieldPanel` / `resizableFieldPanel`	`true`	필드 패널(행/열/값/필터 배치 UI) 이동/리사이즈 허용
`defaultFormatString`	`'###0.#####'`	값 필드 기본 표시 형식
`headerHeight` / `rowHeight` / `footerHeight`	`24` / `24` / `30`	크기
`width` / `height`	`NaN`(자동)	전체 크기

메서드

syn.uicontrols.$auipivot.<메서드명>(elID, ...) 형태로 호출합니다.

메서드	설명
`getValue(elID, requestType, metaColumns)` / `setValue(elID, value)`	공통 인터페이스(원본 소스 데이터 조회/설정)
`clear(elID, isControlLoad)`	피벗 초기화
`setRowFields(elID, fields)` / `setColumnFields(elID, fields)` / `setValueFields(elID, fields)` / `setFilterFields(elID, fields)`	행/열/값/필터 필드 배치
`getRowFields(elID)` / `getColumnFields(elID)` / `getValueFields(elID)` / `getFilterFields(elID)`	현재 필드 배치 조회
`setFieldAlias(elID, aliasObj)` / `getFieldAlias(elID)`	필드 표시명(별칭)
`setDateTypeField(elID, dateField)`	날짜 자동 분해(년/분기/월 등) 대상 필드 지정
`setDisplayOrderRules(elID, rules)` / `getDisplayOrderRules(elID)`	필드값 표시 순서 규칙
`setSorting(elID, sortingInfo, onlyLastDepthSorting)` / `clearSortingAll(elID)`	정렬
`setFilterCache(elID, cache)` / `getFilterCache(elID)` / `clearFilterAll(elID)`	필터 상태
`setGridData(elID, data)` / `getSourceData(elID)` / `getPivotData(elID)`	원본/피벗 데이터 조회·설정
`getCellDetailList(elID, rowIndex, columnIndex)` / `getDimensionValues(elID, rowIndex, columnIndex)`	특정 셀을 구성하는 원본 행 상세 조회
`getFooterData(elID)`	합계행 데이터 조회
`expandAll(elID)` / `collapseAll(elID)` / `expandAllColumns(elID)` / `collapseAllColumns(elID)` / `showItemsOnDepth(elID, depth)`	트리 펼치기/접기
`exportFile(elID, options)`	내보내기
`resize(elID, width, height)`	크기 재조정
`showPivotPanel(elID)` / `hidePivotPanel(elID)` / `createPivotPanel(elID, panelPID)` / `destroyPivotPanel(elID)`	필드 배치 패널 표시/숨김/생성/제거
`setHeatmapColors(elID, dateField, operation, colors)` / `changeHeatmapColors(elID, dateField, operation, colors)`	히트맵 색상 지정
`bind(elID, type, func)` / `unbind(elID, type)`	이벤트 수동 바인딩/해제(원본 `AUIPivot.bind`/`unbind` 래퍼)
`updatePivot(elID)`	피벗 재계산/재렌더링

이벤트 (syn-events)

syn-events 배열에 아래 이름을 넣으면 AUIPivot.bind(gridID, 이벤트명, ...)로 자동 연결됩니다. 핸들러 이름은 {elID}_{이벤트명} 규칙입니다.

이벤트명	핸들러 시그니처
`cellClick`	`(elID, rowIndex, columnIndex, dataField, value, item, type, headerText)`
`cellDoubleClick`	`(elID, rowIndex, columnIndex, dataField, value, item, type, headerText)`
`columnStateChange`	`(elID, property, dataField, headerText, depth, isBranch, oldValue, currentValue, type)`
`contextMenu`	`(elID, target, dataField, headerText, columnIndex, rowIndex, depth, item, pageX, pageY, type)` → 반환값으로 메뉴 항목 제어 가능
`footerClick` / `footerDoubleClick`	`(elID, footerIndex, footerText, footerValue, pageX, pageY, type)`
`headerClick`	AUIPivot 원본 이벤트 객체 기반
`hScrollChange` / `vScrollChange`	스크롤 변경 시
`pivotBegin` / `pivotComplete`	피벗 재계산 시작/완료 시
`pivotPanelHide` / `pivotPanelShow`	필드 배치 패널 숨김/표시 시
`sorting`	정렬 변경 시
`treeOpenChange`	트리 노드 펼침/접힘 상태 변경 시

핸들러 등록 예:

let $samplePage = {
    event: {
        pvtSales_cellClick(elID, rowIndex, columnIndex, dataField, value) {
            syn.$l.eventLog('pvtSales_cellClick', '{0}:{1}'.format(dataField, value));
        }
    }
}

참고

CRUD 상태 플래그(Flag) 등 그리드 계열 컨트롤 공통 개념은 WebGrid 문서의 "그리드 엔진 공통 concept"를 참고하세요.
단순 목록/편집 그리드가 필요하다면 AUIGrid를 사용하세요.
AUIPivot 공식 문서: https://www.auisoft.net/documentation/auipivot/

이 컨트롤은 무엇인가요?​

언제 사용하나요?​

빠른 시작​

예제 실행하기​

더 알아보기​

실전 예제 페이지​

auipivotbasic.html​

소스와 로드 파일​

API 참조​

마크업​

Options (pivotOptions)​

메서드​

이벤트 (syn-events)​

참고​