수정 일자 버전 (SP2)
WebSquare5 Studio : 20210120_1621_x86_64_B
WebSquare5 Engine : 5.0_4.4295B.20210115.133702_1.5
다차원 데이터 분석 기능을 제공하는 테이블(평균 합, 카운트 등을 나타내고 싶을때 사용)
Property
Property | Description |
|---|---|
allTotalName SP2 | 총합계 부분 label |
autoFit SP2 | [lastColumn, allColumn] pivot table에 정의 된 width에 맞춰 여백이 없이 가득 채워주는 기능으로 가로 스크롤이 생기지 않는다. allColumn은 여백을 모든 컬럼에 분배하여 조절하며 lastColumn은 마지막 컬럼을 allColumn은 모든 컬럼의 너비를 조정한다. |
autoFitMinWidth SP2 | pivot의 최소 width(px단위)를 지정하는 기능으로 autoFit속성의 값이 allColumn일 때 적용된다. |
autoPopupInvalidMessage SP2 | key 입력시 regExp에 정의되지 않은 문자 입력시 자동으로 경고창 띄워줄지 여부 |
bodyTextAlign SP2 | [default:center, left, right] header를 제외한 body 항목의 text 정렬 방법. |
class SP2 | HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다. 기본적으로 엔진 내부에서 컴포넌트별로 class를 적용하고 있으며 해당 class를 이용하여 컴포넌트의 css를 공통으로 적용할 수 있다. |
cols SP2 | pivotTable을 초기에 보여줄 때 column축에 둘 컬럼을 정의한다. 구분자","를 통해 column id를 입력한다. 입력된 column의 순서에 따라 결과가 달라진다.(ex1) cols="col3,col4,col5" (ex2) cols="col5,col3,col4" |
dataList SP2 | pivotTable과 연동할 dataList id |
decimalSep SP2 | 소수 정수 구분 문자. useNumberFormat true일 경우 적용. |
defaultAggregator SP2 | [default:Sum]기본 aggregator(통계함수)를 설정하는 옵션이다. field에 정의된 aggregator가 우선순위가 높으며, field에 정의된 aggregator가 없을 경우 해당 옵션의 aggregator를 사용한다. aggregator는 Sum, Average, Count, Minimum, Maximum 등 기본적으로 제공되는 aggregator외에 사용자 정의 함수 aggregator를 등록할 수 있다. |
digitsAfterDecimal SP2 | 소수점 자릿수. useNumberFormat true일 경우 적용. |
excludeHiddenList SP2 | Header의 hiddenList에서도 제외할 column. |
grandTotalName SP2 | header의 vals 합계 부분 label |
headerListOrder SP2 | HeaderList 순서 정의. |
headerTextAlign SP2 | [default:center, left, right] header에 대한 text 정렬 방법. |
hiddenHeaderList SP2 | Header에서 보여주지 않을 headerList 정의. |
id SP2 | 컴포넌트 id |
invalidMessage SP2 | validate API를 호출 하였을 때 검증 실패에 대한 결과 메세지를 본 속성의 값으로 표현되는 기능으로 displaymessage속성이 true로 되어있어야 한다. invalidMessageFunc과 동시 적용이 불가하다. |
prefix SP2 | data 앞에 붙일 문자. useNumberFormat true일 경우 적용. |
rows SP2 | pivotTable을 초기에 보여줄 때 row축에 둘 컬럼을 정의한다. 구분자","를 통해 column id를 입력한다. 입력된 column의 순서에 따라 결과가 달라진다.(ex1) rows="col1,col2" (ex2) rows="col2,col1" |
scaler SP2 | 배수 값. useNumberFormat true일 경우 적용. |
showZero SP2 | data가 없을 경우 0으로 보여줄지 여부. useNumberFormat true일 경우 적용. |
sortFunction SP2 | rows,cols,vals 축 각각에 해당하는 data의 순서를 전체적으로 직접 정의하고 싶은 경우 column id를 인자로 받는 사용자함수를 작성한 후 함수명을 해당 옵션으로 입력한다. field 각각의 sortOrder 속성을 통해 보다 쉽게 출력되는 data 순서를 조작할 수 있다. 이 속성이 정의되어있고 해당 사용자함수가 존재하는경우 field에 정의된 sortOrder 속성은 무시된다. |
suffix SP2 | data 뒤에 붙일 문자. useNumberFormat true일 경우 적용. |
textAlign SP2 | [default:center, left, right] pivot 전체 항목의 text 정렬 방법. |
thousandsSep SP2 | 3자리 마다 구분 문자. useNumberFormat true일 경우 적용. |
useNumberFormat SP2 | 사용자 정의 number format 옵션 사용 여부. (digitsAfterDecimal, scaler, showZero, decimalSep, thousandsSep, prefix, suffix) |
vals SP2 | pivotTable을 초기에 보여줄 때 value축에 둘 컬럼을 정의한다. 구분자","를 통해 column id를 입력한다. vals로 설정된 column이 2개 이상일 경우 Σ값 레이블이 생성된다. 입력된 column의 순서에 따라 결과가 달라진다. (ex1) vals="col6,col7" (ex2) cols="col5,col3,col4" |
valuesAxis SP2 | [default:row] Σ값 레이블이 생성된 경우 (value축 컬럼이 2개 이상인경우) Σ값 레이블의 위치를 설정하는 옵션이다. |
브라우저 캡쳐화면
pivottable
CSS Overriding
PivotTable 컴포넌트를 designView에 그리고 property 의 Class 에 사용자 정의 class를 정의한 다음 Preview 합니다.
pivottable1
No | Class | Description |
|---|---|---|
1 | w2pivotTable | w2pivotTable는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 렌더링되는 시점에서 자동으로 부여됩니다. 여기에 사용자 정의 클래스를 추가해서overriding(덮어쓰기) 하여 디자인을 바꿀 수 있습니다. |