Translate

[jqGrid] Data grouping 옵션/설정 설명

날짜:






실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



Data grouping (데이터 그룹화)


공통규칙
 - 그룹화는 다른 기준으로 데이터를 그룹화 하는 방법이며, jqGrid는 현재 레벨 그룹화만 지원한다.

 - jqGrid 에서 그룹화하는 간단한 방법은 그리드 옵션의 grouping:true 를 이용해 그룹화를 활성화 하고 그룹이 발생할 필드 name을 정의하는 것이다. name은 colModel의 name과 일치해야 하며, 그리드 옵션 groupingView 의 groupField 배열로 정의한다.

 - 그룹화를 정확하게 하길 원한다면 서버에서 가져온 데이터를 그리드에서 필드로 소팅을 한다는것을 알아야 하며, 로컬모드(array data)일때 데이터는 자동으로 그룹화(소팅) 되므로 추가로 정렬할 컬럼을 정의하지 않아도 된다.
1004lucifer
 - 데이터가 원격(remote)인경우 우리가 그룹화된 데이터를 원한다는 것을 서버에 알려주기 위해 jqGrid 는 sidx 파라메터에 우리가 그룹화 하는 groupField name을 추가한다.
jQuery("#grid").jqGrid({ 
  ...
  grouping:true, 
  groupingView : { 
     groupField : ['name'],
     groupDataSorted : true 
  }, 
  caption: "Grouping" 
});
위와같이 설정된경우 아래와 같이 서버에 요청된다.
이러한 요청으로 서버에서 적절한 소팅을 한 데이터를 그리드로 반환한다. 그런다음 그리드는 가져온 데이터를 가져와 header와 footer에 정의된 적절한 그루핑을 추가한다.





제한사항

 - 그룹화가 되면 아래와 같은 옵션이 변경된다.
1. scroll = false;
2. rownumbers = false;
3. treeGrid = false;
4. gridview = true (afterInsertRow 메소드도 수행되지 않음)





그리드 옵션

 - 그룹화의 모든 옵션은 grid 옵션으로 설정되며 setGridParam 메소드를 이용하여 동적으로 변경이 가능하다. 2가지 옵션을 다음과 같다.

1. grouping - true | false (그룹화 사용여부)
2. groupingView - 객체로 된 추가옵션이 있으며 아래와 같이 사용한다.
1004lucifer
jQuery("#grid").jqGrid({ 
  ...
  groupingView : { 
     groupField : ['name', 'ínvdate'],
     groupOrder : ['asc', 'desc'] 
  }
  ...
});

다음은 groupingView 부분의 옵션이다.
PropertyTypeDescriptionDefault
groupFieldarray우리가 그룹화하는 colModel의 name을 정의한다.
첫번째값은 1레벨값, 두번째값은 2레벨값이다.		empty
groupOrderarray그룹 레벨의 초기 정렬순서를 정의한다.
오름차순 또는 내림차순 (기본값 오름차순)
ex) asc | desc		empty
groupTextarray그리드의 그룹레벨에 보여질 그루핑 헤더 문자열을 정의한다.
{0}을 정의하게되면 그룹값 name을 표시하게되며, 다른값으로 {1}을 기술하면 그룹의 전체 cont를 보여주게된다.
여기에는 유효한 HTML 콘텐츠를 설정할 수 있다.		empty
groupColumnShowarray그룹화할 컬럼을 보여주거나 숨기며, 이 값은 그룹레벨에 대한 true | false 값을 기술한다.
그룹화가 활성화된경우 이값을 true로 설정한다.		empty
groupSummaryarray현재 그룹레벨에 대한 요약 (footer)row 을 활성/비환성 한다.
그룹화가 설정된경우 기본값은 false이다.		empty
groupSummaryPosarray현재 그룹레벨의 요약 row의 위치를 설정한다.
header | footer 값이 설정 가능하다.
header - 요약값이 그룹값과 동일한 위치에 배치된다.
footer - 그룹레벨의 마지막에 row가 추가되고 여기에 요약값이 배치된다.		footer
hideFirstGroupColbooleantrue 설정 시 첫번째 컬럼이 빈 값으로 변경되어 이쁘게 보여지며, 일반적으로 첫번째 컬럼은 그룹컬럼인다.false
showSummaryOnHideboolean그룹 축소 시 요약(footer)row 를 보이거나 숨긴다.false
groupCollapseboolean그리드를 초기화 될때 그룹의 세부 row를 보여질지 감출지 여부를 정의한다.false
plusiconstring그룹화된 row가 축소된 경우 사용할 아이콘(jQuery UI 테마 Roller)을 설정ui-icon-circlesmall-plus
minusiconstring그룹화된 row가 학장된 경우 사용할 아이콘(jQuery UI 테마 Roller)을 설정ui-icon-circlesmall-minus
isInTheSameGrouparray배열 요소는 그룹의 갯수에 해당하며, 이 그룹의 모든 요소는 true | false 를 반환해야 하는 함수이다.
false를 반환하는 경우 이 요소는 그룹에 추가가 된다.
함수에는 파라메터로 다음값을 넘겨준다.
previous value
current value
group index
group object		null
formatDisplayFieldarray배열 요소는 그룹의 갯수에 해당하며, 모든 요소는 그룹화된 값을 보여줄 값을 반환해야 한다.
함수에는 파라메터로 다음값을 넘겨준다.
current value
source value
colModel option
group index
group object		null





colModel 옵션

 - 그룹요약 footer row 가 활성화 된경우 컬럼 모델에서 옵션을 사용하여 요약필드의 type을 설정하며, colModel에 2가지 옵션을 추가하며 다음과 같은 type이 있다.


summaryType
 - 특정값이 있는 문자열이거나 사용자정의함수일 수 있다.
jQuery("#grid").jqGrid({ 
  ...
  colModel : [
     {..},
     {name:'amount',index:'amount', width:80, align:"right", sorttype:'number',formatter:'number',summaryType:'sum'},
     ...
  ],
  ...
});
이 옵션은 컬럼에 적용되는 현재 그룹값의 계산타입을 결정하며 다음 함수의 빌드를 지원한다.
1004lucifer
1. sum - 현재 그룹값에 sum함수를 적용하고 결과를 반환한다.
2. count - 현재 그룹값에 count함수를 적용하고 결과를 반환한다.
3. avg - 현재 그룹값에 average 함수를 적용하고 결과를 반환한다.
4. min - 현재 그룹값에 min 함수를 적용하고 결과를 반환한다.
5. max - 현재 그룹값에 max 함수를 적용하고 결과를 반환한다.

이 옵션은 함수로 정의할 수 있으며, 정의된경우 함수에 파라메터로 current value, name, record object 값이 전달된다.
함수는 값을 반환해야 하며, 이 값은 그룹값이 변경될때까지 재사용된다.

아래는 sum 함수를 시뮬레이트 하는 예제이다.
function mysum(val, name, record)
{
return parseFloat(val||0) + parseFloat((record[name]||0));
}
 
jQuery("#grid").jqGrid({ 
  ...
  colModel : [
     {..},
     {name:'amount',index:'amount', width:80, align:"right", sorttype:'number',formatter:'number',summaryType:mysum},
     ...
  ],
  ...
});



summaryTpl
 - 이 옵션은 요약 footer row에서 사용할 수 있는 템플릿 역할을 하며, 기본적으로 {0} 으로 정의된다. 즉, 요약값이 보여지며, 유효한 HTML 코드가 포함될 수 있다.
1004lucifer


summaryRound
{..., summaryRound: number_of_digits, ... }
 - 그룹화가 설정된경우 이 옵션은 colModel에 정의되어 있지 않는다.
number_of_digits 는 기본적으로 정의되어있지 않으며, 이 옵션은 나머지 부분의 소수점 이하길이를 결정한다.



summaryRoundType
{ summaryRoundType: 'round' | 'fixed' }
 - 이 매개변수는 summaryRound 가 정의된 경우에만 동작하며, 반올림 방법을 선택한다. (기본값: round)
round - 반올림하고 이후 0을 유지하지 않음
fixed - 반올림하고 이후 0을 유지한다.





메소드
1004lucifer
Function Parameters Returns Description
groupingToggle groupid none groupid로 식별된 그룹을 토글한다.
groupid = {grid의 id} + 'ghead_' + {grid view 현재 카운트수}
ex) grid의 id가 mygrid 인경우 grid의 두번째 그룹값은 mygridghead_1 값이 된다.
groupingGroupBy name,
options		 grid object 주어진 이름으로 그룹화를 수행한다.
추가 option set 은 옵션 매개변수로 설정할 수 있다.
groupingView 객체는 options 매개변수로 확장된다.
groupingRemove current grid object 현재 그룹화를 제거하고 grouping 파라메터를 false로 설정한다.
current 파라메터가 true로 설정되어 있다면 모든 header와 footer를 그리드 트리거 하지 않고 제거한다.
false인경우(기본값) 그리드는 트리거 된다.





참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:grouping#grid_options

댓글

댓글 쓰기