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

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

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

</head>

<body>

</body>

</html>

             

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

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

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

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

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"/>

<script type="text/javascript" src="../AUIGrid/AUIGrid.js"/>

</head>

<body>

</body>

</html>

 

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

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

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

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"/>

<script type="text/javascript" src="../AUIGrid/AUIGrid.js"/>

<script type="text/javascript" src="./ajax.js"></script>

</head>

</html>

 

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

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

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"/>

<script type="text/javascript" src="../AUIGrid/AUIGrid.js"/>

<script type="text/javascript" src="./ajax.js"></script>

<link href="./style/AUIGrid_style.css" rel="stylesheet"/>

</head>

<body>

           <div id="grid_wrap" style="width:800px;height:480px;"></div>

</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 이 준비된 상태여야 합니다. , bodyonload, window.onload 이벤트 발생 후에 생성할 수 있습니다.(, jQuery document ready 함수)

 

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

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"></script>

<script type="text/javascript" src="../AUIGrid/AUIGrid.js"></script>

<script type="text/javascript" src="./ajax.js"></script>

<link href="./style/AUIGrid_style.css" rel="stylesheet">

 

<script type="text/javascript" >

 

// 칼럼 레이아웃 작성

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>

           <div id="grid_wrap" style="width:800px;height:480px;"></div>

</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>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"></script>

<script type="text/javascript" src="../AUIGrid/AUIGrid.js"></script>

<script type="text/javascript" src="./ajax.js"></script>

<link href="./style/AUIGrid_style.css" rel="stylesheet"></link>

 

<script type="text/javascript" >

 

// 칼럼 레이아웃 작성

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>

           <div id="grid_wrap" style="width:800px;height:480px;"></div>

</body>

</html>

 

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