[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

Programming Log

이 블로그 검색

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

댓글

댓글 쓰기