AUIPivot Documentation

간단하게 피벗 그리드 생성해 보기(Quick Start)

1. 새로운 html 페이지 작성하고 다음과 같이 html 파일 초안을 만듭니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

2. head 태그에 AUIPivotLicense.js 와 AUIPivot.js 자바스크립트 파일을 추가 시켜주십시오.

AUIPivotLicense.js 파일은 AUIPivot 라이센스 파일입니다.

AUIPivot 을 정상 출력하기 위해서 먼저 라이센스 등록을 해주십시오.

AUIPivot.js 파일은 파일명 그대로 피벗 그리드 컴포넌트입니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

3. AUIPiovt 의 메시지가 정의된 메시지 파일을 다음과 같이 추가합니다.

원하는 언어팩으로 골라 선택합니다. 기본적으로 한글 언어팩을 추가하도록 하겠습니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

4. XMLHttpRequest(Ajax 통신)을 하기 위해 샘플에 제공된 ajax.js 파일을 추가시켜 주십시오.

만약 jQuery 나 Jindo 같이 JS 프레임워크를 사용한다면 해당 프레임워크에서 제공하는 ajax 를 사용하면 됩니다.

즉, jQuery 프레임워크 사용 시 이 부분은 생략 하십시오. AUIPivot 은 특정 프레임워크에 종속적이지 않기 때문에 문서 상 ajax.js 파일을 추가시킵니다.

<!DOCTYPE html>

<head>

</head>

</html>

5. AUIPivot 의 기본 디자인을 위한 CSS 파일을 추가시켜주고 피벗 그리드가 위치할 Div 태그를 하나 작성합니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

6. 실제로 작성된 #pivot_wrap Div HTML 엘리먼트에 다음과 같이 피벗 그리드를 출력시킵니다.

// 실제로 #pivot_wrap 에 피벗 그리드 생성

myPivotID = AUIPivot.create("#pivot_wrap");

단, create() 메소드를 사용하기 위해서는 HTML DOM 이 준비된 상태여야 합니다. 즉, body의 onload, window.onload 이벤트 발생 후에 생성할 수 있습니다.(즉, jQuery 의 document ready 함수)

이를 종합한 소스는 다음과 같습니다.

<!DOCTYPE html>

<head>

//AUIPivot 생성 후 반환 ID

var myPivotID;

// 윈도우 onload 이벤트 핸들링

// 만약 jQuery 사용한다면, $(document).ready(function() {}); 사용하세요.

window.onload = function() {

// 실제로 #pivot_wrap 에 피벗 그리드 생성

myPivotID = AUIPivot.create("#pivot_wrap");

};

</script>

</head>

<body>

</body>

</html>

지금까지 피벗의 대상이 되는 데이터 없이 출력 시킨 모습입니다.

이제 AUIPivot 에서 피벗팅 대상인 데이터를 가져와 삽입해 보도록 하겠습니다.

7. Ajax 요청으로 응답 값 피벗 그리드에 데이터 삽입하기

그리드의 데이터는 Ajax 요청으로 JSON 형식의 데이터를 사용할 것입니다.

미리 준비된 샘플의 car_sales.json 파일을 메모장으로 열어보십시오. (car_sales.json 파일은 samples/data/ 폴더에 존재합니다.)

이 데이터는 서버가 만들어내야 할 JSON 형식입니다.

[{

"REGION": "서울 지점",

"NAME": "아반테",

"MODEL": "1.6 GDi",

"COLOR": "Blue",

"PRICE": 1384000,

"COUNT": 1,

"DATE": "2015/01/01",

"TOTAL": 1384000

}, {

"REGION": "부산 지점",

"NAME": "소나타",

"MODEL": "2.0 Turbo GDi",

"COLOR": "

....

...

];

위 데이터를 가져오기 위해 Ajax 요청을 합니다.

//데이터 요청

function requestData() {

// ajax 로더 표시

AUIPivot.showAjaxLoader(myPivotID);

// ajax (XMLHttpRequest) 로 그리드 데이터 요청

ajax( {

url : “car_sales.json”,

onSuccess : function(data) {

// 피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작

initPivotData(data);

// 로더 제거

AUIPivot.removeAjaxLoader(myPivotID);

onError : function(status, e) {

alert("데이터 요청에 실패하였습니다.\r status : " + status);

// 로더 제거

AUIPivot.removeAjaxLoader(myPivotID);

}

});

};

//피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작

function initPivotData(data) {

// 행필드

AUIPivot.setRowFields(myPivotID, ["REGION", "NAME", "MODEL"]);

// 칼럼 필드

AUIPivot.setColumnFields(myPivotID, [ "DATE_HALF", "DATE_QTR", "DATE_MONTH"]);

// 필터 필드, 원하면 주석 제거

//AUIPivot.setFilterFields(myPivotID, ["COLOR"]);

// 값 필드

AUIPivot.setValueFields(myPivotID, [{"dataField":"TOTAL", "operation":"SUM"}]);

// 데이터 중 날짜 필드를 명시하여 연, 반기, 분기 등으로 나눠 표시하도록 지시

AUIPivot.setDateTypeField(myPivotID, "DATE");

// 피봇그리드에 데이터 삽입

AUIPivot.setGridData(myPivotID, data);

};

ajax() 함수는 4번에서 추가한 ajax.js 에서 정의된 전역 함수입니다.

위에 설명했듯이 jQuery 를 사용한다면 jQuery 에서 제공하는 ajax 요청을 사용하세요.

이로써 모든 설정이 완료되었습니다.

다음은 전체소스 내용입니다.

<!DOCTYPE html>

<head>

//AUIPivot 생성 후 반환 ID

var myPivotID;

// 윈도우 onload 이벤트 핸들링

// 만약 jQuery 사용한다면, $(document).ready(function() {}); 사용하세요.

window.onload = function() {

// 실제로 #pivot_wrap 에 피벗 그리드 생성

myPivotID = AUIPivot.create("#pivot_wrap");

// 피벗팅 대상 데이터 요청하여 그리드에 적용하기

requestData();

};

//데이터 요청

function requestData() {

// ajax 로더 표시

AUIPivot.showAjaxLoader(myPivotID);

// ajax (XMLHttpRequest) 로 그리드 데이터 요청

ajax( {

url : "car_sales.json",

onSuccess : function(data) {

// 피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작

initPivotData(data);

// 로더 제거

AUIPivot.removeAjaxLoader(myPivotID);

onError : function(status, e) {

alert("데이터 요청에 실패하였습니다.\r status : " + status);

// 로더 제거

AUIPivot.removeAjaxLoader(myPivotID);

}

});

};

//피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작

function initPivotData(data) {

// 행필드

AUIPivot.setRowFields(myPivotID, ["REGION", "NAME", "MODEL"]);

// 칼럼 필드

AUIPivot.setColumnFields(myPivotID, [ "DATE_HALF", "DATE_QTR", "DATE_MONTH"]);

// 필터 필드, 원하면 주석 제거

//AUIPivot.setFilterFields(myPivotID, ["COLOR"]);

// 값 필드

AUIPivot.setValueFields(myPivotID, [{"dataField":"TOTAL", "operation":"SUM"}]);

// 데이터 중 날짜 필드를 명시하여 연, 반기, 분기 등으로 나눠 표시하도록 지시

AUIPivot.setDateTypeField(myPivotID, "DATE");

// 피봇그리드에 데이터 삽입

AUIPivot.setGridData(myPivotID, data);

};

</script>

</head>

<body>

</body>

</html>

이를 실행하면 다음과 같은 화면을 볼 수 있습니다.(위 소스 실제 동작 화면 보기)