HTML5 자바스크립트 그리드(JavaScript Grid)

그룹핑 썸머리(소계) 행을 특정 조건의 값만 구분해서 적용한 모습입니다.

유입 플랫폼의 값에 따라 각각 "Desktop", "Mobile", "Tablet" 으로 구분해서 출력한 모습니다.

구분해서 출력하지 않은 원래 그룹핑 썸머리와 비교해 보십시오.(원래 그룹핑 썸머리 데모 보기)

동일 선 상의 열(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"
	}, {
		operation: "SUM", 
		text : "Mobile 합계",
		constraintField : "flatform", // flatform == "Mobile" 인 행들의 합계만 구해서 출력
		constraint : "Mobile"
	}, {
		operation: "SUM", text : "Tablet 합계",
		constraintField : "flatform", // flatform == "Tablet" 인 행들의 합계만 구해서 출력
		constraint : "Tablet"
	}]
},