RealGrid HELPB2-2 Row Grouping
들어가며
로우 그룹핑(row grouping)이란 특정 컬럼을 기준으로 그룹핑하는 것을 의미합니다. 즉, 해당 컬럼의 데이터값이 동일한 행을 묶는 것을 의미합니다. [A15 강좌],[A16 강좌]에서 로우 그룹핑(row grouping)에 대한 기본적인 이론과 사용방법을 배웠습니다.
이 강좌에서는 rowGroup.header, rowGroup.footer, panel의 영역에 데이터를 표시하거나 rowGroup.bar영역의 너비를 조정하고 그룹핑시 rowGroup.header영역을 접거나 펼치는 방법에 대해 배워보겠습니다.
이론
RealGrid는 Grouping을 할 수 있습니다. gridView.setGroupingOptions()함수를 사용해서 그루핑된 영역에 대한 옵션을 설정할 수 있습니다. 그리고 그루핑의 영역 중에서 rowGroup.header, rowGroup.footer영역에 대한 옵션 설정으로 여러가지 값을 표시 할 수 있습니다.
우선 rowGroup의 모든 영역의 위치에 대해서 확인하고 넘어가겠습니다.
rowGroup의 모든 영역은 아래와 같습니다.
- rowGroup.panel : panel에서 그루핑 된 컬럼들의 영역 입니다.
- rowGroup.header : 데이터 셀에서 그루핑 된 컬럼의 정보가 보여지는 영역입니다.
- fowGroup.footer : 데이터 셀에서 필드의 값에 대하여 연산 및 text를 보여줄 수 있는 영역입니다.
- rowGroup.head : 컬럼의 header영역 앞이 head영역 입니다.
- rowGroup.bar : rowGroup.head를 기준으로 아래로 표시되는 영역입니다.
- rowGroup.headerBar : rowGroup.header영역 앞에 데이터 셀을 보거나 숨길 수 있도록 하는 영역입니다.
- rowGroup.footerBar : rowGroup.footer영역 앞의 영역 입니다.
- rowGroup.foot : rowGroup.head를 기준으로 제일 아래에 표시되는 영역 입니다.
RowGroupOptions
- headerStatement : RowGroup 헤더에 표시할 문자열 format을 지정합니다.
- expandedAdornments : RowGroup이 펼쳐진 상태일 때 rowGroup.header, rowGroup.footer영역의 표시 여부를 지정할 수 있습니다.
- collapsedAdornments : RowGorup이 펼쳐지지 않은 상태일 때 rowGroup.header, rowGroup.footer영역의 표시 여부를 지정할 수 있습니다.
- mergeExpander : expander 표시여부를 지정합니다.
- mergeMode : 행 그루핑시 그루핑된 컬럼의 merge표현 여부를 지정합니다.
- levelIndent : 그룹레벨간 들여쓰기 여백을 지정합니다.
- levelIndent : 30 설정으로 rowGroup.bar영역의 너비를 설정할 수 있습니다.
- summaryMode : 각 컬럼의 총 합계 또는 그룹핑된 그룹의 합계나 분산 등 에 대해서 자동으로 계산합니다.
- rowGroup.footer영역에 합계, 평균, 분산 등 내용 표시방법을 설정할 때 사용합니다.
- rowGroup.footer영역에 값을 표시하기 위해서 필드속성에서 footer에 groupExpression:”avg”와 같이 footer에 대하여 기본적으로 계산방법이 설정되어 있어야 합니다.
- groupExpression에 값으로는 SummaryExpressionType에서 확인하실 수 있습니다.
- groupExpression을 설정하지 않을 경우 rowGroup.footer영역에 계산방법에 대한 설정이 되어있지 않기 때문에 아래의 3가지 옵션이 적용되지 않습니다.
- summaryMode : “none” 컬럼의 합계를 계산하지 않습니다.
- summaryMode : “aggregate” 합,평균,최대값,최소값 등 산술적인 합계를 자동으로 계산합니다.
- summaryMode : “statistaical” 분산, 표준편차 등 통계적 합계를 자동으로 계산합니다.
위 옵션중에서 mergeMode, mergeExpander, expandedAdornments, collapsedAdornments에 대한내용은 다음 강좌인 [B2-3 강좌]에서 자세히 배우겠습니다. 이번 강좌에서는 headerStatement옵션과 panel영역의 grouping에 관련된 옵션 설정 방법에 대해서 알아보도록 하겠습니다.
우선 rowGroup.header영역에 표시하기 위한 옵션중 headerStatement은 type이 string이며 값의 format형식은 ${설정값}입니다. 헤더에 표시할 문자열을 format해서 문자열 값을 rowGroup.header영역에 보여주는 gridView.setRowGroup()함수의 RowGroupOptions중에서 headerStatement옵션을 사용해서 RowGrouping에 설정하여 문자열을 rowGroup.header영역에 표시하게 됩니다.
rowGroup.header영역에 표시할 수 있는 headerStatement옵션에 기본 초기 설정 값으로는 “${groupField}: ${groupValue} - ${rowCount} rows”로 설정 되어있지만 원하는 속성으로 바꾸어서 사용하실 수 있습니다. headerStatement옵션에 대한 설정값은 아래와 같습니다.
rowGroup 영역
우선 이 강좌를 연습하기 전에 RealGrid의 Style Regions에서 rowGroup영역들을 이해하는 것이 좋습니다. Style Resion에서 rowGroup관련 영역은 아래와 같습니다.
- rowGroup.panel
panel에서 그룹핑 된 컬럼들의 영역 입니다. - rowGroup.header
데이터 셀에서 그룹핑 된 컬럼의 정보가 보여지는 영역입니다. - fowGroup.footer
데이터 셀에서 필드의 값에 대하여 연산 및 text를 보여줄 수 있는 영역입니다. - rowGroup.head
컬럼의 header영역 앞이 head영역 입니다. - rowGroup.bar
rowGroup.head를 기준으로 아래로 표시되는 영역입니다. - rowGroup.headerBar
rowGroup.header영역 앞에 데이터 셀을 보거나 숨길 수 있도록 하는 영역입니다. - rowGroup.footerBar
rowGroup.footer영역 앞의 영역 입니다. - rowGroup.foot
rowGroup.head를 기준으로 제일 아래에 표시되는 영역 입니다.
header에 값 표시하기
rowGroup.header영역에 값을 표시하기 위해 headerStatement속성에 값을 지정합니다. 이 속성에 값을 지정하는 형식은 ${설정값}입니다. 여기서 $는 jQuery와는 아무런 관련이 없습니다.
headerStatement속성에는 초기값이 지정되어 있으며 그 값은 “${groupField}: ${groupValue} - ${rowCount} rows”입니다.
- headerStatement: “문자”
- 모든 rowGroup.header영역에
문자라는 문자열 값을 표시합니다. - 문자열 안에
문자는 모든 영역에 같은 문자가 표시 되지만 아래와 같은 설정으로 해당하는 format값들로 표시할 수 있습니다.
- 모든 rowGroup.header영역에
- headerStatement: “${groupField}”
- 기준
필드의 이름name값을 표시합니다.
- 기준
- headerStatement: “${fieldHeader}”
필드의header값을 표시합니다.
- headerStatement: “${groupColumn}”
컬럼의name값을 표시합니다.
- headerStatement: “${columnHeader}”
컬럼헤더의"text"를 표시합니다
- headerStatement: “${groupValue}”
그룹의데이터값을 표시합니다.
- headerStatement: “${rowCount}”
데이터행의개수를 표시합니다.
- headerStatement: “${groupField}: ${groupValue} - ${rowCount} rows”
- 간단한 수식을 사용하여 계산된 값을 표시합니다.
- 문자열 “ “안에 영역에 문자를 넣어서 표시할 수 있습니다.
그리고 GroupingOptions에서는 panel에 메시지를 표시할 수 있으며 그루핑을 할 수 없도록 할 수도 있습니다.
footer영역 메시지 표시
- summaryMode
- summaryMode속성을 이용해 footer영역에 메시지를 표시하거나 컬럼의 계산결과를 표시 할 수 있습니다.
Panel영역에 메시지 표시
- prompt
- type은 string형식으로 문자열의 내용을 panel에 표시할 수 있습니다.
그루핑된 항목 일렬배치
- linear : panel영역에 표시되는 column의 배치 방향을 결정합니다.
- linear : true 설정으로 panel영역에 표시되는 column들을 일렬로 배치할 수 있습니다.
그루핑시 펼침 여부
- expandWhenGrouping : 그루핑시 그룹의 펼침 여부를 지정합니다.
- expandWhenGrouping : false로 설정할 경우 그루핑시 모든 데이터 필드가 접힌상태로 보여집니다.
그룹핑 못하게 하기
- enabled
- 그룹핑의 가/부를 결정하는 옵션입니다. 기본값은 true로 설정되어 그룹핑이 가능하지만 false로 설정하면 그룹핑을 할 수 없는 상태가 됩니다.
bar영역의 너비 변경
- levelIndent
- levelIndent속성에 숫자값을 입력하면 rowGroup.bar영역의 너비를 설정할 수 있습니다.
실습
실습을 통하여 GroupingOptions와 RowGroupOptions의 설정방법을 알아보겠습니다.
-
버튼을 클릭하면 panel영역에 그룹핑 전에 표시할 메시지를 설정하기 위해 아래 코드를 추가합니다.
$("#btnprompt").on("click", function(){ gridView.setGroupingOptions({ prompt : "panel영역 메시지" }); }) -
버튼을 클릭하면 직업과 성별 컬럼을 그룹핑 하기위해 아래 코드를 추가합니다.
$("#btnFieldsGroup").on("click", function(){ gridView.groupBy(["field1", "field2"]); }) -
버튼을 클릭하면 panel영역의 직업과 성별 컬럼을 일렬로 배치하기 위해 아래 코드를 추가합니다.
$("#btnLinear").on("click", function(){ gridView.setGroupingOptions({ linear : true }); }) -
버튼을 클릭하면 rowGroup.header영역에 field값이 표시하기 위해 아래 코드를 추가합니다.
$("#btnGroupField").on("click", function(){ gridView.setRowGroup({ headerStatement: "${groupField}" }); }) -
rowGroup.header영역에 fieldHeader의 내용을 표시하기 위해 fields코드에 header코드를 추가합니다.
var fields = [ { fieldName: "field1", header: "fieldName: field1" }, { fieldName: "field2", header: "fieldName: field2" }... -
버튼을 클릭하면 5번에서 설정한 필드의 header값이 rowGroup.header영역에 표시하기 위해 아래 코드를 추가합니다.
$("#btnFieldHeader").on("click", function(){ gridView.setRowGroup({ headerStatement: "${fieldHeader}" }); }) -
버튼을 클릭하면 컬럼의 name이 rowGroup.header영역에 표시하기 위해 아래 코드를 추가합니다.
$("#btnGroupColumn").on("click", function(){ gridView.setRowGroup({ headerStatement: "${groupColumn}" }); }) -
버튼을 클릭하면 rowGroup.header영역에 컬럼의 헤더에 “text”값을 표시하기 위해 아래 코드를 추가합니다.
$("#btnColumnHeader").on("click", function(){ gridView.setRowGroup({ headerStatement: "${columnHeader}" }); }) -
버튼을 클릭하면 rowGroup.header영역에 그룹의 데이터값을 표시하기 위해 아래 코드를 추가합니다.
$("#btnGroupValue").on("click", function(){ gridView.setRowGroup({ headerStatement: "${groupValue}" }); }) -
버튼을 클릭하면 rowGroup.header영역에 행의 개수를 표시하기 위해 아래 코드를 추가합니다.
$("#btnRowCount").on("click", function(){ gridView.setRowGroup({ headerStatement: "${rowCount}" }); }) -
버튼을 클릭하면 rowGroup.bar영역의 너비를 설정하기 위해 아래 코드를 추가합니다.
$("#btnlevelIndent").on("click", function(){ gridView.setRowGroup({ levelIndent : 30 }); }) -
버튼을 클릭하면 rowGroup.footer영역에 값을 계산하지 않기위해 아래 코드를 추가합니다.
$("#btnsummaryMode").on("click", function(){ gridView.setRowGroup({ summaryMode : "none" }); }) -
버튼을 클릭하면 그룹핑을 할 때 모든 필드가 접힌상태로 나오도록 하기위해 아래 코드를 추가합니다.
$("#btnexpandWhenGrouping").on("click", function(){ gridView.setGroupingOptions({ expandWhenGrouping : false }); }) -
버튼을 클릭하면 그룹핑을 할 수 없도록 설정하기 위해 아래 코드를 추가합니다.
$("#btnGroupenabled").on("click", function(){ gridView.setGroupingOptions({ enabled : false }); })
실행화면
-
버튼을 클릭하여 panel영역에 설정한 메시지로 표시해 줍니다. panel영역의 메시지가 변경 되었는지 확인합니다.
-
버튼을 클릭하여 직업컬럼과 성별컬럼을 그룹상태로 만들어 줍니다.
직업,성별컬럼이 그룹상태가 되었는지 확인합니다. -
버튼을 클릭하여 panel영역의 컬럼들을 일렬로 배치시켜줍니다. 컬럼들의 배치가 일렬로 되었는지 확인합니다.
-
버튼을 클릭하여 rowGroup.header영역에 필드의 이름을 표시합니다. 해당영역에 FIELD1, FIELD2가 표시되는지 확인합니다.
-
버튼을 클릭하여 rowGroup.header영역에 필드header값을 표시합니다. 해당영역에 필드에 설정했던 헤더값 fieldName:field1이 표시되는지 확인합니다.
-
버튼을 클릭하여 rowGroup.header에 컬럼의 name값을 표시합니다. 해당영역에 col1, col2가 표시되는지 확인합니다.
실행예를 잘 확인 할 수 있게 실습 버튼 중간에 위치 시켰습니다.
-
버튼을 클릭하여 컬럼의 헤더text를 표시합니다. 해당영역에 컬럼의 헤더에 “text”인
직업,성별이 표시되는지 확인합니다. -
버튼을 클릭하여 그룹의 데이터값을 표시합니다. 해당영역에 데이터셀의 값이 표시되는지 확인합니다.
-
버튼을 클릭하여 데이터 행의 개수를 표시합니다.
-
버튼을 클릭하여 rowGroup.bar영역의 너비를 30으로 변경해줍니다. 영역의 너비를 확인합니다.
-
버튼을 클릭하면 rowGroup.footer영역의 값을 계산하지 않습니다. 해당 영역에 값이 표시되지 않는 것을 확인합니다.
-
버튼을 클릭고 그룹핑하면 모든 필드가 접힌상태로 그룹핑됩니다. 다른 컬럼을 그룹핑하여 결과를 확인합니다.
-
버튼을 클릭하면 그룹핑을 할 수 없도록 설정합니다. 그룹핑을 시도하여 결과를 확인합니다.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/dlgrids_eval.js"></script>
<script type="text/javascript" src="/script/realgridjs.js"></script>
<script>
var gridView;
var dataProvider;
$(document).ready( function(){
RealGridJS.setTrace(false);
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//필드 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1",
header: "fieldName: field1"
},
{
fieldName: "field2",
header: "fieldName: field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4"
},
{
fieldName: "field5"
},
{
fieldName: "field6"
},
{
fieldName: "field7"
},
{
fieldName: "field8"
},
{
fieldName: "field9"
},
{
fieldName: "field10"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
footer: {
text: "평균=>",
groupText: "평균=>"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "국어"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
header : {
text: "민법"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
header : {
text: "한국사"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
header : {
text: "영어"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
header : {
text: "과학"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
header : {
text: "사회"
},
footer: {
styles: {
textAlignment: "near",
numberFormat: "0"
},
text: "평균",
expression: "avg",
groupExpression: "avg"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
["가수", "남자", "성시경", "7", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤상", "9", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤종신", "10", "100", "100", "100", "100", "100", "100"],
["가수", "여자", "이소라", "11", "100", "100", "100", "100", "100", "100"],
["배우", "여자", "강소라", "12", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "타블로", "13", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "이승환", "14", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "15", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
//panel영역 메시지
$("#btnprompt").on("click", function(){
gridView.setGroupingOptions({
prompt : "panel영역 메시지"
});
})
//작업컬럼 단일그룹
$("#btnFieldsGroup").on("click", function(){
gridView.groupBy(["field1","field2"]);
});
//panel영역 일렬배치
$("#btnLinear").on("click", function(){
gridView.setGroupingOptions({
linear : true
});
})
//필드의 이름
$("#btnGroupField").on("click", function(){
gridView.setRowGroup({
headerStatement: "${groupField}"
});
})
//필드header값
$("#btnFieldHeader").on("click", function(){
gridView.setRowGroup({
headerStatement: "${fieldHeader}"
});
})
//컬럼의 이름
$("#btnGroupColumn").on("click", function(){
gridView.setRowGroup({
headerStatement: "${groupColumn}"
});
})
//컬럼 헤더 text
$("#btnColumnHeader").on("click", function(){
gridView.setRowGroup({
headerStatement: "${columnHeader}"
});
})
//그룹 데이터의 값
$("#btnGroupValue").on("click", function(){
gridView.setRowGroup({
headerStatement: "${groupValue}"
});
})
//데이터행의 개수
$("#btnRowCount").on("click", function(){
gridView.setRowGroup({
headerStatement: "${rowCount}"
});
})
//rowGroup.bar너비
$("#btnlevelIndent").on("click", function(){
gridView.setRowGroup({
levelIndent : 30
});
})
//계산하지 않기
$("#btnsummaryMode").on("click", function(){
gridView.setRowGroup({
summaryMode : "none"
});
})
//필드 접기
$("#btnexpandWhenGrouping").on("click", function(){
gridView.setGroupingOptions({
expandWhenGrouping : false
});
})
//그룹핑 여부
$("#btnGroupenabled").on("click", function(){
gridView.setGroupingOptions({
enabled : false
});
})
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnprompt">panel영역 메시지</button>버튼을 클릭하여 panel영역에 설정한 메시지로 표시해 줍니다. panel영역의 메시지가 변경 되었는지 확인합니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnFieldsGroup">직업, 성별컬럼으로 그룹잡기</button>버튼을 클릭하여 직업컬럼과 성별컬럼을 그룹상태로 만들어 줍니다. 직업,성별컬럼이 그룹상태가 되었는지 확인합니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnLinear">panel영역 일렬배치</button>버튼을 클릭하여 panel영역의 컬럼들을 일렬로 배치시켜줍니다. 컬럼들의 배치가 일렬로 되었는지 확인합니다. 4. <button type="button" class="btn btn-primary btn-xs" id="btnGroupField">필드의 이름</button>버튼을 클릭하여 rowGroup.header영역에 필드의 이름을 표시합니다. 해당영역에 FIELD1, FIELD2가 표시되는지 확인합니다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnFieldHeader">필드header값</button>버튼을 클릭하여 rowGroup.header영역에 필드header값을 표시합니다. 해당영역에 필드에 설정했던 헤더값 fieldName:field1이 표시되는지 확인합니다. 6. <button type="button" class="btn btn-primary btn-xs" id="btnGroupColumn">컬럼의 이름</button>버튼을 클릭하여 rowGroup.header에 컬럼의 name값을 표시합니다. 해당영역에 col1, col2가 표시되는지 확인합니다. <p style="font-size: small;">실행예를 잘 확인 할 수 있게 실습 버튼 중간에 위치 시켰습니다.</p> <div id="realgrid" style="width: 100%; height: 300px;"></div> <p></p> 7. <button type="button" class="btn btn-primary btn-xs" id="btnColumnHeader">컬럼 헤더text</button>버튼을 클릭하여 컬럼의 헤더text를 표시합니다. 해당영역에 컬럼의 헤더에 "text"인 직업, 성별이 표시되는지 확인합니다. 8. <button type="button" class="btn btn-primary btn-xs" id="btnGroupValue">그룹 데이터의 값</button>버튼을 클릭하여 그룹의 데이터값을 표시합니다. 해당영역에 데이터셀의 값이 표시되는지 확인합니다. 9. <button type="button" class="btn btn-primary btn-xs" id="btnRowCount">데이터 행의 개수</button>버튼을 클릭하여 데이터 행의 개수를 표시합니다. 10. <button type="button" class="btn btn-primary btn-xs" id="btnlevelIndent">rowGroup.bar영역 너비</button>버튼을 클릭하여 rowGroup.bar영역의 너비를 30으로 변경해줍니다. 영역의 너비를 확인합니다. 11. <button type="button" class="btn btn-primary btn-xs" id="btnsummaryMode">rowGroup.footer영역 계산하지않기</button>버튼을 클릭하면 rowGroup.footer영역의 값을 계산하지 않습니다. 해당 영역에 값이 표시되지 않는 것을 확인합니다. 12. <button type="button" class="btn btn-primary btn-xs" id="btnexpandWhenGrouping">필드 접기</button>버튼을 클릭고 그룹핑하면 모든 필드가 접힌상태로 그룹핑됩니다. 다른 컬럼을 그룹핑하여 결과를 확인합니다. 13. <button type="button" class="btn btn-primary btn-xs" id="btnGroupenabled">그룹핑 불가능</button>버튼을 클릭하면 그룹핑 불가 상태로 설정합니다. 그룹핑을 시도하여 결과를 확인합니다.
데모 사이트
API 참조