[jqGrid] Show/Hide Columns 설명

 [ jqGrid 한글 API 문서 링크 ]

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


PS.

 아래의 Document 번역내용은 공식적으로 폐지된 기능이며, submit 버튼을 눌러도 알맹이 기능이 빠져버려 함수만 호출될 뿐 아무런 동작을 하지 않는다.
 - https://1004lucifer.blogspot.com/2019/06/jqgrid-upgrade-from-38x-to-400.html
 - https://semidex37.blog.me/120209824344
 afterSubmitForm 과 같은 이벤트함수를 구현하거나 신규 기능을 사용해야 한다.
 제일 하단의 예제 jsfiddle 확인바람.

Show/Hide Columns
1004lucifer
 - 사용자가 표시하거나 숨길 열을 선택할 수 있는 모달창을 표시한다.
 - src 디렉토리의 grid.setcolumns.js 파일이 로드 되어야 사용 가능하다.



호출 방법

 - 일반적으로 버튼에 클릭 이벤트를 추가할 수 있으며, navigator 에서 navButtonAdd 메소드를 사용하는 방법도 가능하다.

jQuery("#mybutton").click(function() {
   jQuery("#grid_id").setColumns(options);
   return false;
});

mybutton - 버튼 요소의 id (다른 유효한 HTML요소일 수 있다.)
grid_id - 생성된 그리드의 id
options - name:value 쌍의 배열이며, 아래의 옵션 참고

1004lucifer
이 방법은 언어파일에서 다음 옵션을 사용한다.

$.jgrid = {
...
 col : {
  caption: "Show/Hide Columns",
  bSubmit: "Submit",
  bCancel: "Cancel"
 },
...

Option	Description	Default
top	모달 대화상자 상단 위치의 초기값. 0값은 좌표가 그리드의 왼쪽 상단에 위치하며, jqModel 옵션이 false인경우 효과가 없다.	0
left	모달 대화상자 왼쪽 위치의 초기값. 0값은 좌표가 그리드의 왼쪽 상단에 위치하며, jqModel 옵션이 false인경우 효과가 없다.	0
width	모달 대화상자의 가로길이	200
height	모달 대화상자의 높이	auto
dataheight	이 파라메터는 콘텐츠의 스크롤을 제어한다. height 파라메터는 모달의 높이를 제어하고, dataheight 파라메터는 콘텐츠의 스크롤 높이를 제어하여 footer의 버튼을 볼수 있게한다.	auto
modal	모달모드의 대화상자를 설정한다. jqModal 옵션이 false인경우 효과가 없다.	false
drag	대화상자는 드래그가 가능하다. 이 작업을 하려면 jQuery UI에서 드래그 가능한 구성요소를 사용해야 할 때 jqDnR.js 플러그인을 포함해야 한다.	true
beforeShowForm	모달 대화상자를 표시하기전에 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
afterShowForm	모달 대화상자를 표시한 후에 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
afterSubmitForm	submit 버튼을 클릭한 후 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
closeOnEscape	사용자가 ESC키를 누르면 모달을 닫을 수 있는지 여부를 결정	true
ShrinkToFit	true 설정 시 그리드의 가로길이에 따라 보여지는 컬럼의 사이즈가 리사이즈 된다.	false
jqModal	true 설정 시 모달 대화상자에 jqModal 플러그인을 사용하도록 한다.	false
colnameview	false 설정 시 colModal의 이름이 표시되지 않는다.	true
closeAfterSubmit	false 설정 시 사용자가 submit 버튼 클릭 시 대화상자가 닫히지 않는다.	true
onClose	(이 옵션이 활성화 된경우) 닫기아이콘/취소버튼/ESC키 누르면 이벤트가 발생한다. 이 함수는 true나 false를 반환할 수 있으며, false 반환 시 대화상자가 닫히지 않는다.	null
saveicon	[true,“left”,“ui-icon-disk”] 기본값을 가지는 배열요소이다. 이 항목은 submit 버튼에 대한 다양한 설정을 한다. 첫번째 항목 - 아이콘 활성화 여부 두번째 항목 - 아이콘 위치 (left | right) 세번째 항목 - UI테마 roller의 유효한 아이콘
closeicon	[true,“left”,“ui-icon-close”] 기본값을 가지는 배열요소이다. 이 항목은 닫기 버튼에 대한 다양한 설정을 한다. 첫번째 항목 - 아이콘 활성화 여부 두번째 항목 - 아이콘 위치 (left | right) 세번째 항목 - UI테마 roller의 유효한 아이콘
updateAfterCheck	true 설정 시 체크박스를 클릭 시 즉시 보여지거나 숨겨진다. 이 옵션을 선택하면 submit 버튼이 숨겨진다.	false
recreateForm	true 설정 시 대화상자가 colModel의 새 옵션(변경된경우)으로 활성화될 때마다 다시 생성된다.	false

 개발자가 모든 항목을 표시하길 원하지 않을 때 보이기/숨기기 방지를 위한 'colModel: hidedlg' (기본값 false) 옵션이 추가되었다. true 설정 시 컬럼이 모달 대화상자에 표시되지 않는다.

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

[jqGrid][Bug] Importing - Uncaught Error: Syntax error, unrecognized expression: rows>page

 [ jqGrid 한글 API 문서 링크 ]

jqGrid의 Export / Import 예제를 만들다가 발견을 했다.



환경: jqGrid v4.7.1 이하버전

증상

xmlstring 형식으로 import 시도 시 데이터가 없는 그리드만 생성되고 아래와 같은 에러가 발생한다.
1004lucifer

jquery.js:2 Uncaught Error: Syntax error, unrecognized expression: rows>page
    at Function.a.error (jquery.js:2)
    at f (jquery.js:2)
    at x (jquery.js:2)
    at Function.a [as find] (jquery.js:2)
    at init.find (jquery.js:2)
    at new init (jquery.js:1)
    at st (jquery.js:1)
    at Object.getXmlData (jquery.jqGrid.js:285)
    at addXmlData (jquery.jqGrid.js:1286)
    at populate (jquery.jqGrid.js:2040)

원인

 - https://github.com/tonytomov/jqGrid/blob/v4.7.1/js/jquery.jqGrid.js#L9557

jqGrid 개발자 소스로 한줄씩 디버깅을 하면서 확인을 해봤으며,
xml 에서 json으로 변환 시 page 부분 데이터중 '>' 기호가 escape 되어 이후의 데이터 파싱 부분에서 에러가 발생하는 것을 확인했다.
('rows>page' 이렇게 데이터가 들어가야 하는데 'rows>page' 라고 데이터가 들어가서 xmlstring 에서 데이터를 추출 시 오류가 발생한다.)
1004lucifer
버전을 바꿔가면서 v4.5.0 부터 v4.7.1 까지 몇개를 테스트 했는데 모두 동일한 오류가 발생했으며, v3.4에 기능이 만들어진 이후에 특정시점부터 버그가 발생한 것으로 보인다.


심지어 공식 데모사이트에서도 동일한 에러가 발생을 한다.
- http://trirand.com/blog/jqgrid/jqgrid.html
(Menu: 'New in version 3.4 > Import Configuration from XML')

[jqGrid] Importing and Exporting 설명

 [ jqGrid 한글 API 문서 링크 ]

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



Importing and Exporting

 - 모듈을 사용하려면 src 디렉토리 JsonXml.js, grid.import.js 가 로드 되어야 한다.

 - 전체 그리드의 구성을 다른 파일형식으로 import 또는 export 하는것이 유용한 경우가 있다.
 1) 서버에 구축된 그리드는 정렬 또는 페이징 후에 재구성 될 수 있으므로 필요에 따라 다른 구성을 신속하게 사용할 수 있다.
 2) 그리드는 서버에서 시각적으로 구성한다음 XML 문자열로 로드할 수 있다.
 3) 그리드 구성은 XML로 DB에 저장한 다음에 필요에 따라 로드할수도 있다.

* jqGrid는 구성과 데이터를 한번에 로드할 수 있다.





메소드
1004lucifer
내보내기 (Exporting)
 - 현재 그리드 구성을 내보내려면 다음과 같이 jqGridExport 를 사용한다.

jQuery("#grid_id").jqGrid('jqGridExport', options);

grid_id - 생성된 그리드의 id
options - name:value 쌍의 배열이다. (아래 참고)

* jqGridImport 메소드를 사용하기전에 이 메소드를 사용하는게 좋다.

Option	Type	Description	Default
exptype	string	내보낼 유형을 결정한다. (두가지 값 허용) xmlstring - 그리드 구성이 xml 문자열로 내보내진다. jsonstring - 그리드 구성이 json 문자열로 내보내진다.	xmlstring
root	string	이 요소는 데이터를 내보낼 때 root 요소의 이름을 설정한다. 즉, 그리드 구성이 요소에 포함되어 있다. 내보낸 데이터는 다음과 같다. xmlstring - <rootelement>jqgrid_configuration </rootelement> jsonstring - {rootelement:{grid_configuration}}	grid
ident	string	보기 좋게 하기 위한 탭 또는 들여쓰기 문자열	\t

그리드의 일부 컬럼이 동적으로 만들어지기 때문에(row번호, 서브그리드 등) export 메소드는 필요없는 모든 데이터를 똑똑하게 제거하고 jqGridImport 에서 사용할 수 있도록 문자열 구성을 준비한다.
1004lucifer

 이러한 방법을 사용할 때 그리드 옵션의 page 파라메터는 다음과 같이 설정되면 안된다.
 pager: jQuery('#mypager')

 다음과 같이 설정을 해야 한다.
 pager: '#mypager'
 또는
 pager: 'mypager'

 그렇지 않으면 import / export 가 정상적으로 작동하지 않는다.

 export를 수행할 때 그리드 구성 및 관련된 이벤트만 내보낸다.
 navigator는 내보내지 않으며, importComplete 이벤트를 사용하여 jqGridImport에서 navigator를 수동으로 구성이 가능하다.

가져오기 (Importing)
 - 이 메소드는 그리드 구성에 따라 옵션규칙(rules)과 그리드의구성을 읽어들이며, 그리드를 처음 구성할 때 그 구성으로 다시 그리드에 데이터를 전달하는 것이 가능하다.
1004lucifer
이 작업은 jqGridImport를 사용하여 수행된다.

 jQuery("#grid_id").jqGrid('jqGridImport', options);

grid_id - 생성된 그리드의 id
options - name:value 쌍의 배열이다. (아래 참고)

Option	Type	Description	Default
imptype	string	import 유형은 xml, json, xmlstring, jsonstring 중에 하나이다.	xml
impstring	string	xmlstring 또는 jsonstring 의 경우 설정해 줘야 한다.
impurl	string	xml 또는 json 인 경우 유효한 url을 구성한다. ajax 요청을 통해 데이터를 받는다.
mtype	string	request 타입을 설정한다. ex) GET | POST	GET
impData	object	name:value 쌍으로 되어있는 url에 전달할수 있는 데이터	empty object {}
xmlGrid	object	xml 구성과 데이터의 위치를 기술한다. config - 구성 태그 data - 데이터 태그	config : “roots>grid”, data: “roots>rows”
jsonGrid	object	json 구성과 데이터의 위치를 기술한다. config - 구성 태그 data - 데이터 태그	config : “grid”, data: “data”
ajaxOptions	object	ajax 요청에 전달할 추가 옵션	empty object {}

PS.
xmlstring 형식으로 import 할 때 다음과 같은 이슈가 있었다.
 - 오류사항 (Syntax error, unrecognized expression: rows>page)



이벤트

 - jqGridImport 에서 호출할 수 있는 이벤트는 하나뿐이다.
1004lucifer

Event	Description
importComplete	이 이벤트는 import 가 성공적으로 수행되고 그리드가 구성된 후 호출된다. 이 이벤트로 서버에 데이터를 호출한다. 이 이벤트를 사용하여 그리드에 추가 매개변수를 설정하거나 navigator를 구성한다.

Export


Import


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

[jqGrid] Pivot Grid 설정/옵션 설명

 [ jqGrid 한글 API 문서 링크 ]

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



[ jqPivot ]

메소드
 - 다음과 같이 호출을 한다.

jQuery("#grid").jqGrid('jqPivot', data, pivotoptions, gridoptions, ajaxoptions);

data
 - 피벗에 전달할 문자열 또는 데이터배열 이다.
문자열인경우 ajax 요청이 수행되며, 반환되어야 하는 데이터는 다음과 같은 이름,값 쌍을 가져야 한다.

{"rows":[
{"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"},
{"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"},
{"CategoryName":"Beverages","ProductName":"Lakkalik","Country":"USA","Price":"2160.0000","Quantity":"120"},
...
]}

rows 속성은 ajaxoptions 에서 구성이 가능하다. (아래참조)


데이터배열이 전달된 경우 rows 속성을 생략하고 데이터를 다음과 같이 표시해야 한다.

[
...
{"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"},
{"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"},
{"CategoryName":"Beverages","ProductName":"Lakkalik","Country":"USA","Price":"2160.0000","Quantity":"120"},
...
]

1004lucifer
피벗메소드는 (서버에서 특별한 처리를 하지 않은)모든 필요한 데이터를 전달받는 것을 기대한다.
모든 변환은 클라이언트측에서 수행되며 jqPivotGrid는 표시할 새로운 데이터를 생성한다.





pivotoptions
 - 다음과 같은 속성을 가진 객체이다.

Property	Type	Description	Default
aggregates	array of objects	집계 레코드를 정의하고 피벗을 생성한다. 배열은 최소한 한개이상의 객체set이 있어야 하며, 항상 정의해야 한다. aggregates 를 설정하지 않으면 피벗이 생성되지 않는다. colModel의 모든 프로퍼티를 설정할 수 있다. (사용가능한 모든 속성은 아래를 참고)	empty
colTotals	boolean	true 설정 시 footer row가 추가로 생성된다. 모든 피벗 필드가 요약되어지며, 요약 함수만 적용된다.	false
frozenStaticCols	boolean	true 설정 시 x축에 정의된 모든 필드가 고정된 것으로 설정되어 수평스크롤 할 때 해당 필드가 항상 표시된다.	false
groupSummary	boolean	이 옵션을 사용하면 그룹 및 하위그룹이 사용가능한경우 요약을 한다. false로 설정 시 합계(summations)를 사용할 수 없다.	true
groupSummaryPos	string	요약row가 그룹의 상단/하단 표시될 위치를 정의한다. ex) header | footer	header
rowTotals	boolean	true 설정 시 row의 모든 컬럼값을 요약하는 컬럼을 추가로 생성한다.	false
rowTotalsText	string	rowTotals 가 true로 설정된 경우 컬럼의 라벨을 설정한다.	Total
xDimension	array of objects	그리드에 사용되는 x축을 정의한다. 이 값은 그리드의 row로 나타내는 소스데이터의 셀이다. 하나이상의 object요소가 설정되면 자동으로 그룹으로 보여진다.. 계층구조는 첫번째 object요소로부터 시작된다. 마지막 요소는 그룹화의 마지막요소이다. colModel의 모든 속성을 설정할 수 있으며, 나머지 옵션은 아래를 참고.	empty
yDimension	array of objects	그리드에 사용되는 y축을 정의한다. 값은 데이터에 따로 동적으로 생성된다. 둘 이상의 object요소가 설정되면 헤더그룹이 자동으로 나타난다. 계층구조는 첫번째 object요소로부터 시작된다. 마지막 요소는 헤더그룹의 마지막요소이며, 나머지 옵션은 아래를 참고.	empty

1004lucifer
xDimension, aggregates 가 빈 배열이 아닌 경우에만 피벗이 빌드된다.



aggregates
 - 이 배열은 obejct요소가 포함되어 있으며, 요소는 집계레코드를 생성하고 총량을 형성하기위해 모여진 항목들의 집합이다.

일반적으로 다음과 같이 표시할 수 있다.

aggregates : [
    { member : 'PrTotal', 
      aggregator : 'sum', 
      label:'Sum', 
      width:50,
      formatter: 'number', 
      summaryType : 'sum', 
      align:'right'
    },{
      member : 'PrTotal', 
      aggregator : 'count', 
      width:50, 
      label: 'Count',
      summaryType : 'sum', 
      formatter:'integer', 
      align:'right'
    }
]

member - 데이터 항목의 위치와 설명을 식별하는데 사용되는 별개의이름 또는 식별자를 의미
aggregator - 적용할 작업을 의미
  1) sum - 요약작성
  2) count - 그룹에 있는 항목의 수를 카운트
  3) min - 최소값 찾기
  4) max - 최대값 찾기
label - 집계의 길이가 1보다 큰경우에만 나타나며, 이경우 집계를 요약하는 추가 그룹헤더를 생성한다. (라벨은 데이터에서 가져온다.)

 colModel의 모든 속성을 여기에 설정할 수 있다.



xDimension
 - dimension은 겹치지 않는 개별 데이터요소로 구성된 데이터set 이며, 주요 기능은 필터링, 그룹화, 라벨링 세가지다.
1004lucifer
ex)

xDimension : [
 {
         dataName: 'CategoryName', 
  label: 'Category',
  width: 70
 } , {
  dataName: 'ProductName', 
  label: 'Product',
  frozen: false
 }
]

dataName - row의 셀로 나타나는 데이터의 셀이며, 이 값은 데이터소스의 name과 일치해야 한다.

colModel의 모든 속성을 여기에 설정할 수 있다.

피벗 옵션 frozenStaticCols 가 true로 설정되면 frozen 속성이 자동으로 설정되며, frozen:false 를 설정하여 덮어쓸수 있지만 신중하게 작업해야 한다.



yDimension
 - 값은 데이터소스에 따른 동적 컬럼으로 생성된다.

ex)

yDimension : [
 {
  dataName: 'Country',
  converter: function(Value, xValues) {
   return 'Total Countryies';
  }
 },{
  dataName: 'Country'
 }
]

dataName - 생성된컬럼 데이터의 셀이며, 이 값은 데이터소스의 name과 일치해야 한다.
converter - 원본 셀데이터를 변환하고 신규값을 반환하는 함수이며 다음과 같은 매개변수가 전달된다.
  1) Value - 값
  2) xValue - row의 'static' 데이터





gridoptions

 - 그리드의 옵션을 설정할 수 있다. (객체형식)





ajaxoptions
1004lucifer
 - 데이터를 ajax를 통해 얻을 때 추가 ajax옵션을 설정할 수 있다.
현재는 JSON 데이터만 지원하므로 dataType과 같은 일부 ajax옵션은 변경하지 않는것이 좋다.

또한 reader 옵션의 root데이터를 지정할 수 있다.

{"root":[
{"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"},
{"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"},
{"CategoryName":"Beverages","ProductName":"Lakkalik","Country":"USA","Price":"2160.0000","Quantity":"120"},
...
]}

서버에서 위와같이 데이터를 반환 시, 아래와 같이 설정하면 된다.

jQuery("#grid").jqGrid('jqPivot', 
   "jsondataurl.json", 
   {pivotoptions}, 
   {gridoptions}, 
   { 
     reader:"root"
   }
);

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

[jqGrid] Pivot Grid 소개

 [ jqGrid 한글 API 문서 링크 ]

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



피벗 테이블이란?

 - 피벗 테이블이란 원하는 보고서를 얻기위해 스프레드시트 또는 데이터베이스 테이블에서 선택한 열과 행의 데이터를 재구성하고 요약할 수 있는 프로그램 도구라고 말할 수 있다.
 - 피벗 테이블은 실제로 스프레드시트나 데이터베이스 자체를 변경하지 않는다. 데이터베이스 용어에서 피벗은 다른 관점에서 데이터를 보기 위해 데이터를 돌리는것이다.





jqPivotGrid 란?
1004lucifer
 - jqPivotGrid는 jqGrid와 함께 사용하여 피벗 그리드를 만들 수 있는 구성요소이다.


카테고리이름/제품이름/국가/가격/수량 필드가 있는 판매 데이터의 다음과 같은 표가 있다고 가정해 보자.
이 데이터를 편집, 검색, 삭제 하려면 jqGrid 기능을 이용해 작업이 가능하다.

다음 질문에 답해야 한다면 무엇을 해야 하는가?

1. 각 카테고리의 주문 금액은 얼마인가?
2. 특정 국가의 각 주문량은 얼마인가?
3. 특정 국가의 각 카테고리와 제품의 주문금액과 수량은 얼마나 되는가?


jqPivotGrid를 사용하여 보고서를 만들면 다음과 같이 표시가 된다.

1004lucifer

jqPivotGrid 사용

 - jqPivotGrid는 jqGrid를 상속하므로 column resizing, formatter, cell renderers, row/cell events 등 익숙한 대부분의 기능을 사용할 수 있다.
 - jqPivotGrid는 jqGrid에서 제공하지 않는 합계 및 피벗 기능을 원할 때 사용할 수 있다.
1004lucifer
데이터를 카테고리 및 국가로 구분하려면 x와 y 축(dimension)을 구성하기만 하면 된다.

xDimension : [{
    dataName: 'CategoryName'
}],
yDimension : [ {
    dataName: 'Country'
}]

멀티레벨을 지원하며, x와 y 축에서 기술 가능하다.
두개 이상의 레벨에서 x축/y축을 설정하면 열/행의 그룹화가 자동으로 수행된다.


이제 데이터에 대한 x/y 축을 이해했으니 셀값을 집계할 차례다.
sum, min, max, count 등등 여러 종류의 집계 기능을 제공한다.
향후 릴리즈에서는 자체 집계함수를 제공한다.

aggregates : [{
    member : 'Price', 
    aggregator : 'sum', 
    width:50,
    label:'Sum'
},{
    member : 'Quantity', 
    aggregator : 'count', 
    width:50, 
    label: 'Count'
}]

위 예제와 같이 'Price', 'Quantity' 에 대한 멀티 데이터필드 집계를 할 수 있다.
모든 필요한 집계를 설정하여 쉽게 작업을 할 수 있다.

1004lucifer
행/열에 대한 총합을 표시하는 설정은 매우 쉽다. ('rowTotals:true' or 'colTotals:true')
그룹합계는 rowTotals 또는 colTotals 설정을 통해서도 사용할 수 있다.

피벗 그리드는 JSON데이터를 데이터소스로 사용하며, 추후 사용가능한 데이터소스를 확장할 예정이다.






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

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

 [ jqGrid 한글 API 문서 링크 ]

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



Header grouping (헤더 그룹화)


공통규칙

 - 헤더 그룹화는 그리드 헤더 row위에 사용자가 필요한 방식으로 그룹화된 컬럼을 추가하는 방식이며, 일반적인 구현은 아래 그림과 같다.
1004lucifer

colSpan 활성/비활성 방식으로 2가지 방법의 그룹화를 지원한다.
colSpan 비활성 - (기본값) 그룹을 가지지 않은 헤더는 그 위에 추가의 셀을 가진다.
solSpan 활성 - 그룹화되지 않은 컬럼 위에 추가 셀이 없고 하나의 컬럼으로 간주된다.





제한사항

 - 정렬 가능한 컬럼은 그룹화와 호환되지 않으며, 둘개의 기능을 동시에 사용할 수 없다.
 - 컬럼 선택자는 헤더그룹과 호환되지 않는다.





헤더 그룹화 사용

 - 그룹화는 grid가 생성된 후에 사용해야 하며, setGroupHeaders 라는 메소드를 다음과 같이 사용한다.

...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
 {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
 {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});
...

setGroupHeaders 옵션
 - 이 메소드는 grid에 헤더그룹을 생성한다. 메소드가 호출되면 그룹화 헤더가 생성된 이후에 그룹헤더 옵션을 grid 파라메터로 저장한다. 이 grid 파라메터를 groupHeader라고 하며 이후에 getGridParam 으로 요청할 수 있고, destroyGroupHeader 메소드는 호출하지 않는다. (해석이 어려움.. 아는분은 댓글로좀..ㅠ)

setGroupHeader 메소드는 다음과 같은 옵션이 있다.
1004lucifer

Property	Type	Description	Default
useColSpanStyle	boolean	그룹화 되지 않은 셀이 그위에 셀을 가져야 하는지 정의한다. (true 인경우 컬럼이 컬럼이 하나로 합쳐진 것으로 간주)	false
groupHeaders	array	헤더 그룹화 텍스트 및 규칙을 설명하는 객체. 아래 모든요소에 대한 배열리스트가 있다..	empty

groupHeaders 요소 옵션
1004lucifer

Property	Type	Description
startColumnName	string	그룹화 헤더가 시작되는 필드(colModel과 같은 name)
numberOfColumns	integer	startColumnName 부터 시작하는 이 그룹에 포함된 컬럼의 갯수. 숨겨진 컬럼이 있는경우 스킵을 하며, 그룹에는 필드가 포함되지 않지만 메소드는 해당필드를 카운트한다.
titleText	string	이 그룹의 텍스트이며, HTML 태그가 포함될 수 있다.

이전 예제를 사용하여 useColSpanStyle 을 true로 변경하면 아래와 같이 보여진다.

...
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: true, 
  groupHeaders:[
 {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
 {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});
...

그룹 헤더 삭제

 - 그룹헤더를 삭제하려면 destroyGroupHeader 메소드를 호출하면 되며, 헤더를 초기상태로 되돌린다.

...
jQuery("#grid").jqGrid('destroyGroupHeader');
...

이 메소드는 선택적 옵션이 하나가 있는데 boolean 상태이며 기본값 true 이다.

...
jQuery("#grid").jqGrid('destroyGroupHeader', false);
...

위와같이 false로 설정된경우 초기 grid 헤더를 복원하지만 그룹헤더가 생성될 때의 그룹화 헤더 옵션은 삭제하지 않는다.
그룹헤더 파라메터의 다른 단어를 삭제된 그룹헤더 대신에 사용할 수 있다. (뭔말인지 모르겠네..ㅠ)


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

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

 [ jqGrid 한글 API 문서 링크 ]

실습 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

[jqGrid] Frozen Columns 기본설정 설명

 [ jqGrid 한글 API 문서 링크 ]

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



Frozen Columns (열 고정)

설정
 - 먼저 고정시킬 컬럼을 설정해야 하며, 아래와 같이 colModel 에서 frozen:true 로 설정을 한다.

...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y', frozen:true},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});

이후에 다음의 메소드를 호출한다.

jQuery("#grid").jqGrid('setFrozenColumns');

* 고정된 설정은 차례대로 설정해야 하며, 고정속성에 순서가 따로 없는경우 마지막 위치가 사용이 된다.
아래 코드는 첫번째 컬럼대신 세번째 컬럼만 고정이 된다.

..
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70, frozen:true},
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setFrozenColumns');

Destroy
 - destroyFrozenColumns 메소드를 사용하여 그리드의 frozenColumns를 삭제할 수 있으며, 이 메소드는 setupFrozenColums를 호출하기 전에 그리드 구성을 복원한다.

jQuery("#grid").jqGrid('destroyFrozenColumns');

동적 설정
 - 고정 열을 동적으로 변경할 수 있으며, 이 경우 첫 번째 destroyFrozenColumns 메소드를 호출하여 새로운 고정 된 속성을 설정하고 다시 setFrozenColumns를 호출해야 한다.
1004lucifer
아래는 invdate 열을 고정시키는 방법이다.

jQuery("#mybutton").click(function(){
   jQuery("#grid")
   .jqGrid('destroyFrozenColumns');
   .jqGrid('setColProp','invdate', {frozen:true});
   .jqGrid('setFrozenColumns');
   .trigger('reloadGrid', [{current:true}]);
});

* 현재 고정된 열을 새로고침하기 위해 trigger('reloadGrid')를 호출해야 한다.



제한사항
 - 아래와 같은 상황에서는 열고정을 사용할 수 없다.
1004lucifer
1. TreeGrid 활성화
2. SubGrid 활성화
3. cellEdit 활성화
4. 인라인편집을 사용하는경우
5. 정렬가능한 열이 활성화된 경우 - 그리드의 sortable 속성이 설정된경우
6. scroll 이 true or 1로 설정된경우
7. Data Grouping 활성화
8. footer row 활성화





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