데이터 그룹(Group)

setGroup(그룹핑) 지정된 컬럼 기준 정렬

setGroup을 설정한 후, 그룹화된 데이터의 정렬은 특정 이벤트를 통해 수행될 수 있습니다.

웹 그리드의 setGroup 기능을 사용할 때, 기본적으로 그룹화는 지정된 컬럼(key)을 기준으로 정렬됩니다.
그러나 그룹화된 상태에서 특정 컬럼을 오름차순 또는 내림차순으로 정렬하려면, 그룹화를 일시적으로 해제하고 정렬 후 다시 그룹화를 적용해야 합니다.

이를 위해 beforesort와 aftersort 이벤트를 활용할 수 있습니다.

이 방식은 정렬된 데이터 기준으로 다시 그룹핑을 수행합니다.

간단한 예제는 다음과 같습니다.

function createQCELL(){
	qcellProperty = {
		id	: 'qcell',
		parentid	: 'sheetarea',
		rowheight	: {'header': 40,'data' : 30},
		data	: {'input': sampleData1},
		merge : {header :"rowandcol"},
		columns	:  [
		{key: 'region', width: '10%', title: ['기본정보','지역']}
	      , {key: 'category',width:'5%', title: ['기본정보','구분'], sort: true, styleclassname: {'data': 'align-center'} }
	      , {key: 'name', width: '12%', title: ['기본정보','휴양림명'], type: "input", sort: true, styleclassname: {'data': 'align-left'}}
		.
		.
		.
			]
	};
	
	QCELL.create(qcellProperty);
	qcell = QCELL.getInstance("qcell");
	
	qcell.bind("beforesort", clearGroup); //그룹화(Groupping)를 해제하는 API가 포함된 함수를 정렬 기능 수행 전에 동작하는 beforesort 이벤트 발생하도록 설정
	qcell.bind("aftersort", group); //그룹화하는 API가 포함된 함수를 정렬 기능 수행 후에 동작하는 aftersort 이벤트 발생하도록 설정
	
	}							
											
	function clearGroup(){
	
		qcell.clearGroup(); //그룹화(Groupping)를 해제하는 API
		
	}			

	function group(){
		qcell.setGroup({ //그룹화
			type: "normal",
			sort : "asc",
			columns: [
			{
				key: 'category',
				expand: true,  
			}
			],
			outer: [
				{
					
					header: {
						"name": ["count()", "개"],
						"area" : ["sum()", " m2"],
						"capacity": ["average()", "명"],
						.
						.
						.
					},
					footer: {
						"name": ["count()", "개"],
						"area" : ["count()", " m2"],
						"capacity": ["count()", "명"],
						.
						.
						.
					},
				} 
			]
		});
	}

정렬하기 전에 그룹을 해제하는 clearGroup(그룹화를 해제하는 API)을 수행하고, 정렬 후에 setGroup을 다시 실행합니다.

총계는 전체 행에 대한 것으로 outer로 정의하며, 상단에 표시하려면 header에, 하단에 표시하려면 footer에 정의합니다.
둘 다 사용할 수 있으며, 틀 고정과 함께 사용하는 것이 좋습니다.

'지정된 컬럼(key)의 asc : 오름차순'

'지정된 컬럼(key)의 desc : 내림차순'