필드 패널을 차량 정보, 판매 정보, 판매일 그룹으로 나눈 모습입니다. setFieldLayout()의 배열과 children에 적은 순서대로 그룹과 필드가 표시됩니다.
그룹 제목을 누르면 접거나 펼칩니다. 마우스나 터치로 그룹을 행, 열, 값, 필터 영역에 끌어 놓으면 접힌 하위 그룹까지 순서대로 배치합니다.
// 그룹과 각 그룹 안의 필드 순서를 지정합니다.
AUIPivot.setFieldLayout(myPivotID, [
{groupId: "vehicle", labelText: "차량 정보", children: [
{dataField: "NAME"}, // 차종
// 하위 그룹도 만들 수 있습니다.
{groupId: "details", labelText: "모델과 색상", children: [
{dataField: "MODEL"}, {dataField: "COLOR"}
]}
]},
{groupId: "sales", labelText: "판매 정보", children: [
{dataField: "REGION"}, {dataField: "PRICE"},
{dataField: "COUNT"}, {dataField: "TOTAL"}
]},
// 판매일 그룹은 처음에 접어서 표시합니다.
{groupId: "date", labelText: "판매일", expanded: false, children: [
{dataField: "DATE_YEAR"}, {dataField: "DATE_HALF"},
{dataField: "DATE_QTR"}, {dataField: "DATE_MONTH"}, {dataField: "DATE"}
]}
]);
차량 정보 그룹을 행 영역에 놓으면 차종, 모델, 색상을 한 번에 배치할 수 있습니다. 같은 차원에 있는 필드는 재사용하며, 값 영역의 새 항목은 숫자에 합계(SUM), 그 외에는 개수(COUNT)를 적용합니다.
아래 버튼으로 목록의 그룹과 순서를 바꿔 보십시오. 그룹 해제는 setFieldLayout(myPivotID, [])로 설정합니다.