AUISoft
AUIPivot 2.5 Documentation
Events

AUIPivot 에서 송출되는 이벤트 리스트입니다.

NameDescription
cellClick
Type : Event

단일 셀 클릭 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 셀에 출력되고 있는 값(value)
  • headerText : 현재 칼럼의 헤더 텍스트
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터 필드

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "cellClick", function( event ) {
      alert("rowIndex : " + event.rowIndex + ", "columnIndex : " + event.columnIndex + " clicked");
});
cellDoubleClick
Type : Event

단일 셀 더블클릭 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 셀에 출력되고 있는 값(value)
  • headerText : 현재 칼럼의 헤더 텍스트
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터 필드

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "cellDoubleClick", function( event ) {
      alert("rowIndex : " + event.rowIndex + ", "columnIndex : " + event.columnIndex + " dbl clicked");
});
columnStateChange
Type : Event   Version: 2.2

그리드의 칼럼을 사용자가 드래깅으로 자리를 바꾸거나 사이즈를 바꾼 경우 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • property : 변경된 칼럼의 속성(columnIndex or width) (String)
  • dataField : 적용된 칼럼의 dataField 값 (String)
  • headerText : 적용된 칼럼의 헤더 텍스트 (String)
  • depth : 적용된 칼럼의 depth(계층형인 경우 유효) (Number)
  • isBranch : 적용된 칼럼이 브랜치 칼럼인지 여부(계층형인 경우 유효) (Boolean)
  • old : 바뀌기 전의 값 (Object)
  • current : 사용자에 의해 변경된 새로운 값(현재 값) (Object)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "columnStateChange", function(event) {
      var str = "event type : " + event.type;
      str += ", dataField : " + event.dataField;
      str += ", prop : " + event.property;
      str += ", old : " + event.old + ", current : " + event.current;
      alert(str);
});
footerClick
Type : Event

피벗 그리드 푸터 클릭 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • footerIndex : 푸터 칼럼 인덱스
  • footerText : 푸터 텍스트
  • footerValue : 포매팅 전 푸터의 값
  • pageX : 클릭이 발생한 지점의 전역 X 좌표 값
  • pageY : 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "footerClick", function( event ) {
     alert(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});
footerDoubleClick
Type : Event

피벗 그리드 푸터 더블 클릭 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • footerIndex : 푸터 칼럼 인덱스
  • footerText : 푸터 텍스트
  • footerValue : 포매팅 전 푸터의 값
  • pageX : 더블 클릭이 발생한 지점의 전역 X 좌표 값
  • pageY : 더블 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "footerDoubleClick", function( event ) {
     alert(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});
headerClick
Type : Event

피벗 그리드 헤더 클릭 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • columnIndex : 헤더 칼럼 인덱스
  • headerText : 헤더 텍스트
  • depth : 헤더의 depth 즉, 헤더를 그룹핑으로 정의한 경우 최상위가 1depth (단일 계층인 경우 depth 는 1)
  • item : 칼럼 레이아웃에서 정의한 자신 칼럼 아이템 객체 (Object)
  • dataField : 현재 칼럼이 출력되고 있는 데이터의 필드
  • pageX : 클릭이 발생한 지점의 전역 X 좌표 값
  • pageY : 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "headerClick", function( event ) {
     alert(event.type + " : " + event.headerText + ", dataField : " + event.dataField + ", index : " + event.columnIndex + ", depth : " + event.item.depth);
     // 이벤트 핸들링 함수에서 false 를 반환하면 기본 행위를 하지 않음.
     // headerClick 의 기본 행위는 정렬임.
     // return false; // 정렬 실행 안함. 
    
});
hScrollChange
Type : Event

피벗 그리드의 수평 스크롤(X 스크롤)이 있는 경우, 수평 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • position : 현재 스크롤의 위치 (Number)
  • oldPosition : 변경 전 스크롤의 위치 (Number)
  • minPosition : 수직 스크롤의 최대 위치 (Number)
  • maxPosition : 수직 스크롤의 최소 위치 (Number)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "hScrollChange", function( event ) {
     console.log( event.type + ", position : " + event.position + ", (min : " + event.minPosition + ", max : " + event.maxPosition + ")" );
});

이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.
pivotBegin
Type : Event   Version: 2.5.6

피벗팅이 시작할 때 발생하는 이벤트입니다.

pivotBegin 이벤트는 pivotComplete 이벤트와 함께 발생합니다.

즉, 피벗팅 계산이 시작하기 전에 pivotBegin 이벤트가 발생하고 피벗팅 계산 완료 후 렌더링까지 완료된 후 pivotComplete 이벤트가 발생합니다.

이 pivotBegion, pivotComplete 이벤트는 피벗팅 연산이 수행될 때마다 다시 발생합니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • rowFields : 피벗팅 수행할 행 차원 필드들(Array)
  • columnFields : 피벗팅 수행할 열 차원 필드들(Array)
  • valueFields : 피벗팅 수행할 값 차원 필드들, 연산자등의 정보들(Array)
  • filterFields : 필터 차원 필드들(Array)
  • byPanelController : 피벗 패널을 통하여 사용자 조작으로 피벗팅을 하는지 여부(Boolean)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type == "pivotBegin") {
          // 사용자가 피벗 패널에서 DATE 필드를 "열 차원" 으로 설정한 경우
          // 이런 경우는 피벗팅을 하지 않음
          if(event.byPanelController && event.columnFields.indexOf("DATE") != -1) {
              alert("DATE 필드는 열 차원에 설정할 수 없습니다.");
              return false; // false 를 반환하면 기본 행위인 피벗팅을 하지 않음.
          }
        console.log("피봇 시작 시간 : " + new Date().getTime());
    } else if(event.type == "pivotComplete") {
        console.log("피봇 완료 시간 : " + new Date().getTime());
    }
});

Return : (Boolean) false 를 반환하면 피벗팅을 하지 않습니다.
pivotComplete
Type : Event

피벗팅 계산 후 렌더링이 완료될 때 발생하는 이벤트입니다.

pivotComplete 이벤트는 pivotBegin 이벤트와 함께 발생합니다.

즉, 피벗팅 계산이 시작하기 전에 pivotBegin 이벤트가 발생하고 피벗팅 계산 완료 후 렌더링까지 완료된 후 pivotComplete 이벤트가 발생합니다.

이 pivotBegion, pivotComplete 이벤트는 피벗팅 연산이 수행될 때마다 다시 발생합니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • rowFields : 피벗팅 수행한 행 차원 필드들
  • columnFields : 피벗팅 수행한 열 차원 필드들
  • valueFields : 피벗팅 수행한 값 차원 필드들, 연산자등의 정보들
  • filterFields : 필터 차원 필드들

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type == "pivotBegin") {
        console.log("피봇 시작 시간 : " + new Date().getTime());
    } else if(event.type == "pivotComplete") {
        console.log("피봇 완료 시간 : " + new Date().getTime());
    }
});
pivotPanelHide
Type : Event   Version: 2.5.1

피벗 패널이 생성된 경우(사용 하는 경우) 피벗 패널이 감춰질 때 발생하는 이벤트입니다.

이 이벤트는 피벗 패널이 이미 생성된 후 사용자에 의해 감춰질 때 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • panelId : 피벗 패널이 생성된 DIV ID

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "pivotPanelHide", function(event) {
      alert(event.type);
});
pivotPanelShow
Type : Event   Version: 2.5.1

피벗 패널이 생성된 경우(사용 하는 경우) 피벗 패널이 보일 때 발생하는 이벤트입니다.

이 이벤트는 피벗 패널이 생성될 때가 아닌 이미 생성된 후 사용자에 의해 감춰지고 다시 보일 때 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • panelId : 피벗 패널이 생성된 DIV ID

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "pivotPanelShow", function(event) {
      alert(event.type);
});
sorting
Type : Event

사용자가 헤더를 클릭 해서 정렬(Sorting)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • sortingFields : 현재 정렬된 필드 및 정렬 방법들 (Array)

만약 정렬을 "Name 오름차순, County 내림차순" 설정한 경우 다음과 같은 sortingFields 정보를 담고 있습니다.

[ {dataField : "name", sortType : 1}, {dataField : "country", sortType : -1}]

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "sorting", function( event ) {
     console.log(  "이벤트명: " + event.type + ", 현재 소팅 필드 개수 : " + event.sortingFields.length );
});
treeOpenChange
Type : Event

트리 그리드 일 때 요약 행 아이템의 열기/닫기 상태 변경 시 발생하는 이벤트입니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • isOpen : 현재 열린 상태인지 닫힌 상태인지 여부
  • rowIndex : 해당 아이템의 rowIndex
  • depth : 트리 아이템의 depth 즉, 최상위 브랜치 아이템이 1 depth 이며 아래로 내려갈 수록 depth 1씩 증가함
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "treeOpenChange", function( event ) {
     alert(event.type + " : " + event.isOpen + ", rowIndex : " + event.rowIndex);
});
vScrollChange
Type : Event

피벗 그리드의 수직 스크롤(Y 스크롤)이 있는 경우, 수직 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.

사용자가 마우스 휠이나 다른 특정 행위로 수직 스크롤이 변경되면 발생합니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형
  • pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
  • position : 현재 스크롤의 위치 (Number)
  • oldPosition : 변경 전 스크롤의 위치 (Number)
  • minPosition : 수직 스크롤의 최대 위치 (Number)
  • maxPosition : 수직 스크롤의 최소 위치 (Number)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "vScrollChange", function( event ) {
     console.log( event.type + ", position : " + event.position + ", (min : " + event.minPosition + ", max : " + event.maxPosition + ")" );
});

이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.

Copyright(c) 2022 AUISoft Co., Ltd. All Right Reserved