실습 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 부분의 옵션이다.
Property | Type | Description | Default |
---|---|---|---|
groupField | array | 우리가 그룹화하는 colModel의 name을 정의한다. 첫번째값은 1레벨값, 두번째값은 2레벨값이다. | empty |
groupOrder | array | 그룹 레벨의 초기 정렬순서를 정의한다. 오름차순 또는 내림차순 (기본값 오름차순) ex) asc | desc | empty |
groupText | array | 그리드의 그룹레벨에 보여질 그루핑 헤더 문자열을 정의한다. {0}을 정의하게되면 그룹값 name을 표시하게되며, 다른값으로 {1}을 기술하면 그룹의 전체 cont를 보여주게된다. 여기에는 유효한 HTML 콘텐츠를 설정할 수 있다. | empty |
groupColumnShow | array | 그룹화할 컬럼을 보여주거나 숨기며, 이 값은 그룹레벨에 대한 true | false 값을 기술한다. 그룹화가 활성화된경우 이값을 true로 설정한다. | empty |
groupSummary | array | 현재 그룹레벨에 대한 요약 (footer)row 을 활성/비환성 한다. 그룹화가 설정된경우 기본값은 false이다. | empty |
groupSummaryPos | array | 현재 그룹레벨의 요약 row의 위치를 설정한다. header | footer 값이 설정 가능하다. header - 요약값이 그룹값과 동일한 위치에 배치된다. footer - 그룹레벨의 마지막에 row가 추가되고 여기에 요약값이 배치된다. | footer |
hideFirstGroupCol | boolean | true 설정 시 첫번째 컬럼이 빈 값으로 변경되어 이쁘게 보여지며, 일반적으로 첫번째 컬럼은 그룹컬럼인다. | false |
showSummaryOnHide | boolean | 그룹 축소 시 요약(footer)row 를 보이거나 숨긴다. | false |
groupCollapse | boolean | 그리드를 초기화 될때 그룹의 세부 row를 보여질지 감출지 여부를 정의한다. | false |
plusicon | string | 그룹화된 row가 축소된 경우 사용할 아이콘(jQuery UI 테마 Roller)을 설정 | ui-icon-circlesmall-plus |
minusicon | string | 그룹화된 row가 학장된 경우 사용할 아이콘(jQuery UI 테마 Roller)을 설정 | ui-icon-circlesmall-minus |
isInTheSameGroup | array | 배열 요소는 그룹의 갯수에 해당하며, 이 그룹의 모든 요소는 true | false 를 반환해야 하는 함수이다. false를 반환하는 경우 이 요소는 그룹에 추가가 된다. 함수에는 파라메터로 다음값을 넘겨준다. previous value current value group index group object | null |
formatDisplayField | array | 배열 요소는 그룹의 갯수에 해당하며, 모든 요소는 그룹화된 값을 보여줄 값을 반환해야 한다. 함수에는 파라메터로 다음값을 넘겨준다. 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
댓글
댓글 쓰기