AUIGrid Documentation

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

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

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

2. head 태그에 AUIGridLicense.js 과 AUIGrid.js 자바스크립트 파일을 추가 시켜주십시오.

AUIGridLicense.js 파일은 AUIGrid 라이센스 파일입니다.

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

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

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

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

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

<!DOCTYPE html>

<head>

</head>

</html>

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

원하는 테마 스타일링이 있다면 해당 CSS 파일을 추가시키면 됩니다.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

5. 칼럼레이아웃을 작성합니다.

칼럼 레이아웃은 그리드의 칼럼 구조를 만들어내는 양식입니다.

구체적인 칼럼 레이아웃에 대한 설명은 칼럼 레이아웃 작성에 대하여를 참고하여주십시오.

기본 칼럼 구조인(Name, Country, Product, Quantity, Price, Date) 6 개의 칼럼을 갖는 칼럼 레이아웃을 작성하면 다음과 같습니다.

var columnLayout = [ {

dataField : "name",

headerText : "Name",

width : 140

}, {

dataField : "country",

headerText : "Country",

width : 120

}, {

dataField : "product",

headerText : "Product",

width: 120

}, {

dataField : "quantity",

headerText : "Quantity"

}, {

dataField : "price",

headerText : "Price",

dataType : "numeric"

}, {

dataField : "date",

headerText : "Date"

}

];

칼럼 레이아웃은 배열로 작성되며, 배열 요소로 Object 가 삽입되는데 그 Object 가 하나의 Column 이 됩니다.

6. 작성된 칼럼 레이아웃을 토대로 AUIGrid 를 생성합니다.

// 실제로 #grid_wrap 에 그리드 생성

myGridID = AUIGrid.create("#grid_wrap", columnLayout);

create() 함수로 실제로 앞서 작성한 Div 에 그리드를 출력하게 합니다.

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

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

<!DOCTYPE html>

<head>

// 칼럼 레이아웃 작성

var columnLayout = [ {

dataField : "name",

headerText : "Name",

width : 140

}, {

dataField : "country",

headerText : "Country",

width : 120

}, {

dataField : "product",

headerText : "Product",

width: 120

}, {

dataField : "quantity",

headerText : "Quantity"

}, {

dataField : "price",

headerText : "Price",

dataType : "numeric"

}, {

dataField : "date",

headerText : "Date"

}

];

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

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

window.onload = function() {

// 실제로 #grid_wrap 에 그리드 생성

myGridID = AUIGrid.create("#grid_wrap", columnLayout);

};

</script>

</head>

<body>

</body>

</html>

지금까지 작성한 html 파일을 브라우저로 실행시켜 보십시오.

현재 그리드에 데이터만 삽입하지 않았을 뿐 그리드 작성은 완료된 상태입니다.

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

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

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

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

[{

"id": "#Cust0",

"date": "2014-10-01",

"name": "Steve",

"country": "USA",

"flag": "usa.png",

"product": "IPad Air",

"color": "Green",

"quantity": 3,

"price": 630700

}, {

"id": "#Cust1",

"date": "2014-09-30",

"name": "Emma",

"country": "Korea",

"flag": "korea.png",

"product": "LG G3",

"color": "Pink",

"quantity": 1,

"price": 503800

}, {

"id": "#Cust2",

"date": "2014-09-29",

"name": "Emma",

"country": "Japan",

"flag": "japan.png",

"product": "IPad Air",

"color": "Yellow",

"quantity": 7,

"price": 66900

} ...

....

...

];

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

// ajax 요청 전 그리드에 로더 표시

AUIGrid.showAjaxLoader(myGridID);

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

ajax( {

url : ”./data/normal_100.json",

onSuccess : function(data) {

if(!data) {

return;

}

// 그리드 데이터

var gridData = data;

// 로더 제거

AUIGrid.removeAjaxLoader(myGridID);

// 그리드에 데이터 세팅

AUIGrid.setGridData(myGridID, gridData);

onError : function(status, e) {

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

}

});

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

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

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

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

<!DOCTYPE html>

<head>

// 칼럼 레이아웃 작성

var columnLayout = [ {

dataField : "name",

headerText : "Name",

width : 140

}, {

dataField : "country",

headerText : "Country",

width : 120

}, {

dataField : "product",

headerText : "Product",

width: 120

}, {

dataField : "quantity",

headerText : "Quantity"

}, {

dataField : "price",

headerText : "Price",

dataType : "numeric"

}, {

dataField : "date",

headerText : "Date"

}

];

// 그리드 생성 후 해당 ID 보관 변수

var myGridID;

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

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

window.onload = function() {

// 실제로 #grid_wrap 에 그리드 생성

myGridID = AUIGrid.create("#grid_wrap", columnLayout);

// Ajax 요청 실행

requestAjax();

};

// Ajax 요청을 합니다.

function requestAjax() {

// ajax 요청 전 그리드에 로더 표시

AUIGrid.showAjaxLoader(myGridID);

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

ajax( {

url : ”./data/normal_100.json",

onSuccess : function(data) {

if(!data) {

return;

}

// 그리드 데이터

var gridData = data;

// 로더 제거

AUIGrid.removeAjaxLoader(myGridID);

// 그리드에 데이터 세팅

AUIGrid.setGridData(myGridID, gridData);

onError : function(status, e) {

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

}

});

};

</script>

</head>

<body>

</body>

</html>

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