AUIGrid 3.0.10 DEMO
테마 선택 :

그룹핑 썸머리(소계) 행을 특정 조건의 값을 확장하여 원하는 대로 적용한 모습입니다.

유입 플랫폼의 값에 따라 각각 "Desktop", "Mobile", "Tablet" 으로 구분되는데 여기서 크게 "Mobile" 과 "Tablet"은 합해서 "Mobile" 과 "Desktop"으로 출력한 모습니다.

동일 선 상의 열(column)에 위치하도록 Type 3 유형으로 출력하였습니다.

// 합계(소계) 설정
groupingSummary  : {
	// 소계 필드는 "viewCnt", "exposeCnt", "clickCnt" 3개에 대하여 실시 합니다.
	dataFields : [ "viewCnt", "exposeCnt", "clickCnt" ],
	
	// groupingFields 에서 설정한 필드의 depth 대로 썸머리 행이 출력되는 것이 기본입니다.
	// 그러나 원하는 않는 썸머리는 제외 시키십시오.
	// 즉, 썸머리로 출력되는 대상 제외 시키는 필드 설정
	excepts : [ "flatform"],
	
	// 그룹핑 썸머리 행의 구체적 설정
	rows: [{
		operation: "SUM", 
		text : "Desktop",
		constraintField : "flatform", // flatform == "Desktop" 인 행들의 합계만 구해서 출력
		constraint : "Desktop"
	}, {
		text : "Mobile+Tablet",
		// 사용자 정의 계산 함수
		// items (Array) : 소계의 대상이 되는 행들
		// dataField (String) : 소계 대상 필드 (데모 상에서는 viewCnt, exposeCnt, clickCnt 가 대상임)
		expFunction : function(items, dataField) { // 여기서 실제로 출력할 값을 계산해서 리턴시킴.
			var sum = 0;
			items.forEach(function(item) {
				// flatform 이 Mobile 이거나 Tablet 인 행의 viewCnt, exposeCnt, clickCnt 를 계산하여 반환
				if(item.flatform == "Mobile" || item.flatform == "Tablet") {
					sum += Number(item[dataField]);
				}
			});
			return sum;
		},
	}, {
		operation: "SUM",
		text : "비율",
		constraintField : "flatform",
		constraint : function(values) {
			// values 는 위에서 정의한 연산 값을 갖는 배열임.
			// 즉, 해당 예제에서 위에 정의한 연산은 2개로..
			// values[0] 은 Desktop 에 대한 SUM, MIN, MAX, COUNT 등
			// values[1] 은 Mobile+Tablet 에 대한 계산값이 SUM 에 있음
			var rate = (values[1].SUM / values[0].SUM) * 100;
			return AUIGrid.formatNumber(rate, "#,##0.00") + "%";
		}
	}]
},