[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

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Chrome] ERR_SSL_VERSION_OR_CIPHER_MISMATCH 이슈 원인 및 해결방법

이미지
증상  - 크롬을 이용해 SSL/TLS(https) 프로토콜 접속 시 아래와 같은 에러가 발생한다.  ERR_SSL_VERSION_OR_CIPHER_MISMATCH  지원되지 않는 프로토콜  클라이언트와 서버가 일반적인 SSL 프로토콜 버전 또는 암호화 제품군을 지원하지 않습니다. 원인 1. 서버(WAS)에서 낮은 버전의 SSL을 사용하는 경우 1004lucifer 2. 서버(WAS)에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리 할 수 없는경우   ( 링크 - Cipher Suites란 무엇일까? ) 해결방법 1. 서버가 낮은 버전의 프로토콜을 사용하는 경우   - 브라우저에서 낮은 버전의 프로토콜을 사용 가능하도록 옵션을 변경해 준다.   (크롬과 IE는 같은 인터넷 옵션을 사용한다.) 2. 서버에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리할 수 없는경우  1) IE, Edge, FireFox, Opera 등등 다른 브라우저를 사용해본다.   - 브라우저마다 처리할 수 있는 Cipher Suites 종류가 다르다. ( 상세내용링크 )   - 이것마저 안되면 브라우저 사용자가 더이상 할 수 있는건 없다. 1004lucifer  2) 서버관리자가 수정 할 수 있는 방법   - 최신 프로토콜(TLS)을 사용할 수 있도록 WAS를 업그레이드 하거나 설정한다.   - 대부분의 브라우저에서 지원하는 Cipher Suites를 사용하도록 셋팅한다. ( 상세내용링크 )
Read more »

[Regex] 정규표현식 특정 문자열 포함하지 않는 매칭 방법

이미지
특정 문자열이 들어있는 라인을 제외하고 어떻게 문자열을 추출할 수 있을까 하다가 알아보았다. 특정 문자열이 포함되지 않게 매칭하는 방법은 아래와 같다. 1004lucifer  ^((?!단어).)*$ https://regexr.com/4fsa8 복수개의 단어에 대해서 문자열을 제외하고 싶다면 다음과 같이 할 수 있다. 1004lucifer  ^((?!단어|단어).)*$ https://regexr.com/4fsan 1004lucifer 복수개의 단어가 동시에 없어야 한다면 다음과 같이 할 수 있다. (이 방법은 지난번 링크-정규표현식 AND 연산 사용방법  을 응용해 봤다.)  ^((?!(?=.*단어)(?=.*단어)).)*$  ^((?!(?=.*단어)(?=.*단어)(?=.*단어)(?=.*단어)).)*$ https://regexr.com/4fsb0 매칭되는 원리 1. negative lookahead 를 이용하면 해당 단어와 일치하지 않은 단어의 앞에있는 문자열이 매칭된다. 1004lucifer 2. 해당 매칭문자열에 점(.) 하나 붙여서 글자를 하나더 추가 매칭이 가능 3. 해당 문자열 앞에 단어 대신 시작(^)을 붙여서 해당 문자열로 시작되지 않는것만 매칭 4. 그룹화를 해서 해당 문자열 제외한 앞에까지 모두 매칭 5. 마지막까지 모두 매칭되면 추출 완료 정규식 참고  -  https://stackoverflow.com/questions/406230/regular-expression-to-match-a-line-that-doesnt-contain-a-word
Read more »

[CSS] 상속받은 상위 속성(style) 무효화(초기화) 하기

PS. 모든 상위속성을 무시하는 걸 원한다면 아래 링크의 라이브러리를 사용하기를 권장한다. - 10+ Best CSS Reset Stylesheets 많은 상황에서 상속받은 CSS에 대하여 depth를 이용하거나 CSS우선순위를 이용하여 덮어쓰기(!?) 하여 해결이 가능한것 같다. 하지만 다른 style을 적용하지 않고 부모 엘리먼트의 style 상속을 받지 않아야 하는 경우가 발생하여 알아보니 :not(selector) 라는 기능이 있었다. 1004lucifer 엄밀히 말하면 상속을 초기화(reset) 한다기 보다.. 부모 Element 에서 style 적용 시 특정 Element에 style이 적용되지 않도록 하는 기능이다. 예제 <div class="parent"> <span>aaaaaa</span>< br/> <p>aaaaaa</p>< br/> <span>aaaaaa</span>< br/> <span>aaaaaa</span> </div> .parent :not(p) { color:red; } 1004lucifer 아래와 같은 형식으로도 사용이 가능하니 의외로 활용성이 좀 있어 보인다. - div :not(.home) {…} - div *:not(p) em {…} - input:not([type="text"]) {…} - h2:not(.foo):not(.bar) {…} - li:not(.pingback) .comment-content p:first-child:first-line {…} - div:not(.home) h2 + p:first-letter {…} - .post:not(.f...
Read more »