Translate

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







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

댓글