PivotGrid

PivotGrid는 PivotEngine 구성 요소에서 생성된 데이터 요약을 표시합니다. FlexGrid 컨트롤을 확장하여 다음 기능을 제공합니다:

• 계층적인 행 및 열 헤더

• 접을 수 있는 행 및 열 그룹

• 값을 계산하는 데 사용된 데이터를 보기 위해 셀을 드릴다운

• 필드 속성을 편집할 수 있는 컨텍스트 메뉴

PivotGrid 컨트롤을 시작하려면 PivotGrid.itemsSource 속성을 PivotEngine의 인스턴스로 설정하여 두 구성 요소를 연결해주세요.

먼저, 그리드를 위한 호스트 요소가 필요합니다.

<div id="pivotGrid"></div>

그 다음 코드로 PivotGrid를 생성할 수 있습니다.

let ng = new wjOlap.PivotEngine({
    autoGenerateFields: false,
    itemsSource: data
});

let pivotGrid = new wjOlap.PivotGrid("#pivotGrid", {
    itemsSource = ng
});

소계

PivotEngine이 행 또는 열 소계를 표시하도록 설정되면, PivotGrid는 자동으로 접을 수 있는 행 및 열 그룹을 생성합니다.

총계를 데이터 앞에 또는 뒤에 표시하려면, PivotEngine 의 totalsBeforeData 속성을 사용하여 구성할 수 있습니다.

ng.totalsBeforeData = true;

PivotGrid 의 collapsibleSubtotals 속성을 사용하여 행 및 열 그룹을 접을 수 있도록 구성할 수 있습니다.

pivotGrid.collapsibleSubtotals = true;

두 가지를 모두 활성화하면 다음과 같은 그리드를 얻을 수 있습니다

참고:

'Grand Totals(총계)' 행도 데이터 앞에 이동되었습니다.

소계와 고정 행

PivotEngine 을 설정하여 데이터를 위에 총계를 표시하는 것은 PivotGrid 에 고정된 행이 있을 때 편리합니다. 이를 통해 그리드가 스크롤될 때 총계가 항상 보이도록 보장할 수 있습니다.

이 예제에서는 사용자가 스크롤할 때 Grand Total 행을 그리드 상단에 고정시킵니다.

PivotGrid 에서 행을 고정하는 방법은 FlexGrid와 동일합니다. 고정하고자 하는 행의 수를 frozenRows 속성에 설정하면 됩니다. 아래 예제는 PivotGrid에서 첫 번째 행을 고정합니다.

pivotGrid.frozenRows = 1;