AUISoft
AUIGrid 3.0.10 Documentation
 

Capter 1. VUE.js 에서 AUIGrid 사용하기

 

1. 사전 필요 사항

사전 지식으로 다음을 충족하는 개발자에 해당되는 매뉴얼입니다.

l  AUIGrid 기존에 사용한 개발자여야 합니다

l  Node.js, Vue.js 에 대하여 최소한의 이해와 지식을 갖춘 개발자여야 합니다.

2. 환경 구성

콘솔(터미널)에서 node, vue, npm 버전을 확인 하십시오.
(
출력 버전이 본 문서의 버전 이상을 권합니다. 낮은 버전인 경우 업그레이드 하십시오.)

콘솔에서 버전 확인이 되지 않는다면 Vue.js 에 대한 환경 구성이 되지 않은 상태이니 먼저 환경 구성을 하시길 바랍니다.

본 문서의 IDE Visual Studio Code 를 사용합니다.

3. Vue.js 프로젝트 생성하기

콘솔(터미널)에서 다음 명령어를 입력하여 Vue 프로젝트를 생성합니다.

vue create my-auigrid-sample

default 에서 엔터를 누릅니다.

정상적으로 프로젝트 생성이 완료되면 다음 메시지를 확인할 수 있습니다.

이제 생성된 프로젝트를 확인합니다.

cd my-auigrid-sample
npm run serve

localhost:8080 에서 작동하는 Vue 기본 프로젝트 화면을 확인 할 수 있습니다.

4. AUIGrid 컴포넌트 프로젝트에 삽입하기

AUIGrid 정품(또는 평가판)을 압축을 해제 한 경우 폴더 구조는 다음과 같습니다.

AUIGrid 폴더와 AUIGrid-Vue.js 폴더 전체를 복사하여 방금 생성한 my-auigrid-sample 폴더에 붙여넣기합니다. (본 문서는 다음과 같은 구조에 복사했습니다.)

프로젝트 Root src 폴더 아래 “static” 폴더를 만든 후 복사하였습니다.
(
처음에는 이 폴더 구조대로 따라하길 권장합니다.)

전체적인 프로젝트 폴더 구조 모습입니다.

5. AUIGrid.vue 컴포넌트 적용하기

기본으로 생성된 Vue 필요 없는 샘플 파일을 먼저 삭제합니다.

components/HelloWorld.vue 파일 삭제

App.vue 의 기본 내용을 삭제하고 다음처럼 AUIGridSample을 추가합니다.
(
아직 AUIGridSample 컴포넌트는 만들지 않았습니다.)

다음으로 components 폴더 아래 AUIGridSample.vue 파일을 하나 생성하여 기본 vue 컴포넌트 구조를 작성합니다.

AUIGridSample.vue 전체 내용은 다음과 같습니다.

여기까지 한 경우 어떠한 에러도 나지 않고 브라우저에서 확인하면 빈 공백만 출력합니다.

6. AUIGrid의 칼럼 레이아웃, 그리드 속성 작성하기

AUIGridSample.vue 파일의 data columnLayout auigridProps 정의합니다.

정의한 모습은 다음과 같습니다.

7. AUIGrid 생성하기

정의한 칼럼 레이아웃과 그리드 속성을 토대로 AUIGrid 생성합니다.

생성은 Vue.js 라이프라이클mounted 에서 생성할 것입니다.

AUIGrid 로의 Vue.js ref 값을 통해 접근합니다. 본 문서에서 ref 속성값을 myGrid로 설정하였습니다.

따라서 다음처럼 AUIGrid.vue 컴포넌트 인스턴스로 접근이 가능합니다.

let grid = this.$refs.myGrid;

여기까지 잘 작성하였다면 브라우저에서 데이터가 없는 빈 그리드가 출력될 것입니다.

8. AUIGrid 데이터 삽입하기

데이터는 로컬 데이터를 삽입하도록 하겠습니다.
(
다음 챕터에서 axios를 통하여 서버 사이드의 DB 데이터를 삽입하는 샘플이 마련되어 있습니다.)

그리드에 삽입할 로컬 데이터를 임의로 작성합니다. 본 문서는 AUIGrid 정품(또는 평가판)을 압축해제 하였을 때 나오는 normal_100.json 파일을 그대로 사용할 것입니다.

해당 파일의 위치는 폴더 루트/samples/data/normal_100.json” 입니다.

normal_100.json 파일을 열어 데이터를 복사하여 gridData 라는 속성을 만든 후 붙여넣기 합니다.

위와 같이 로컬 데이터를 작성한 모습입니다.

이제 mounted 라이프사이클 콜백에서 AUIGrid create 이후 바로 데이터를 삽입합니다.

여기까지 작성하면 완성된 모습입니다.

브라우저에서 확인하면 다음과 같은 결과를 확인할 수 있습니다.

 

감사합니다.

 

l  App.vue 전체 파일 내용

<template>

  <div id="app">

    <AUIGridSample/>

  </div>

</template>

 

<script>

 

// AUIGridSample 등록

import AUIGridSample from './components/AUIGridSample.vue'

 

export default {

  name: 'app',

  components: {

    AUIGridSample

  }

}

</script>

 

<style>

 

</style>

 

 

 

l  AUIGridSample.vue 전체 파일 내용

<template>

    <div>

        <AUIGrid ref="myGrid" class="grid-wrap">

        </AUIGrid>  

    </div>

</template>

 

<script>

 

// AUIGrid 컴포넌트

import AUIGrid from "../static/AUIGrid-Vue.js/AUIGrid.vue";

 

export default {

    components : {

        AUIGrid

    },

 

    data: function () {

        return {

            // 그리드 칼럼 레이아웃 정의

            columnLayout : [{

                dataField : "id",

                headerText : "ID",

                width : 120

            }, {

                dataField : "name",

                headerText : "Name",

                width : 140

            }, {

                dataField : "price",

                headerText : "Price",

                dataType : "numeric",

                width : 120

            }, {

                dataField : "quantity",

                headerText : "Quantity",

                dataType : "numeric"

            }, {

                dataField : "date",

                headerText : "Date",

                dataType : "date"

            }],

            // 그리드 속성 정의

            auigridProps : {

                // 편집 가능 여부 (기본값 : false)

                editable : true,

                // 선택모드 (기본값: singleCell)

                selectionMode : "multipleCells"

            },

            // 그리드 데이터

            gridData : [{

                    "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

                }, {

                    "id": "#Cust3",

                    "date": "2014/09/28",

                    "name": "Emma",

                    "country": "UK",

                    "flag": "uk.png",

                    "product": "Galaxy Note3",

                    "color": "Orange",

                    "quantity": 9,

                    "price": 458300

                }, {

                    "id": "#Cust4",

                    "date": "2014/09/27",

                    "name": "Anna",

                    "country": "China",

                    "flag": "china.png",

                    "product": "LG G3",

                    "color": "Violet",

                    "quantity": 10,

                    "price": 168100

                }]

        }

    },

   

    mounted(){

        let grid = this.$refs.myGrid;

        // 그리드 생성

        grid.create(this.columnLayout, this.auigridProps);

 

        // 그리드 데이터 삽입하기

        grid.setGridData(this.gridData);

    },

 

    methods : {

    }

}

</script>

 

<style>

    .grid-wrap {

        width:600px;

        height:480px;

    }

</style>