AUISoft
AUIGrid 3.0.10 Documentation
 

Chapter 3. Vue.js 에서 AUIGrid 이벤트 및 메소드 사용하기

 

1. 사전 필요 사항

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

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

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

l  이전 Chapter 필독한 개발자여야 합니다.

2. AUIGrid 메소드 사용하기

AUIGrid 메소드는 일반 JS(또는 jQuery)에서는 다음과 같이 접근을 하였습니다.

예로 행 추가메소드인 addRow 메소드는 다음과 같습니다.

// 하단에 1 추가

AUIGrid.addRow(myGridID, item, "last");

그러나 Vue.js 에서 AUIGrid 메소드는 다음과 같이 접근합니다.

// 하단에 1 추가

this.$refs.myGrid.addRow(item, "last");

여기서 this.$refs Vue.js 에서 지원하는 ref 속성입니다.

처음 AUIGrid 컴포넌트를 사용할 때 다음과 같이 설정하였습니다.

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

, 설정한 ref myGrid 이기 때문에 this.$refs.myGrid 로 접근합니다.

더 이상의 myGridID 파라메터를 통한 접근은 Vue.js 에서 하지 않습니다.

3. AUIGrid 이벤트 핸들링 하기

AUIGrid 이벤트는 일반 JS(또는 jQuery)에서 다음과 같이 bind 를 통하여 접근을 하였습니다.

예로 셀 선택 변경(selectionChange)” 이벤트는 다음과 같습니다.

// selectionChange 이벤트 바인딩

AUIGrid.bind(myGridID, "selectionChange", selectionChangeHandler);

그러나 Vue.js 에서 이벤트는 다음과 같이 핸들링합니다.

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

            @selectionChange="selectionChangeHandler">

</AUIGrid>

이것은 Vue.js 에서 지원하는 이벤트 모델입니다.

더 이상 bind 메소드를 통하여 Vue.js 에서 이벤트를 핸들링 하지 않습니다.

 

감사합니다

 

l  AUIGridSample.vue 전체 파일 내용

<template>

    <div>

        <h1>Capter 3 - Vue.js 에서 AUIGrid 이벤트 메소드 사용하기</h1>

        <div>

            <p>"데이터 요청하기" 버튼을 누르면 데이터를 가져와 그리드에 출력합니다</p>

            <p>선택이 변경되거나 셀을 클릭하면 하단에 해당 이벤트 내용을 출력합니다.</p>

            <button @click="refreshBtnClick" class="btn">데이터 갱신하기</button>

            <button @click="addRow" class="btn"> 추가하기</button>

            <button @click="removeRow" class="btn">선택행 삭제하기</button>

        </div>

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

            @selectionChange="selectionChangeHandler"

            @cellClick="cellClickHandler">

        </AUIGrid>

        <div ref="logger"></div>

        <div ref="logger2"></div>

    </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 : "country",

                headerText : "Country",

                width : 140

            }, {

                dataField : "flag",

                headerText : "Flag IMG",

                editable : false,

                prefix : "./assets/",

                renderer : {

                    type : "ImageRenderer",

                    imgHeight : 24,

                    altField : "country"

                },

                width : 100

            }, {

                dataField : "product",

                headerText : "Product",

                width : 140

            }, {

                dataField : "color",

                headerText : "Color",

                width : 100

            }, {

                dataField : "price",

                headerText : "Price",

                dataType : "numeric",

                style : "my-column",

                width : 120,

                editRenderer : {

                    type : "InputEditRenderer",

                    onlyNumeric : true, // 0~9 입력가능

                    textAlign : "right", // 오른쪽 정렬로 입력되도록 설정

                    autoThousandSeparator : true // 천단위 구분자 삽입 여부

                }

            }, {

                dataField : "quantity",

                headerText : "Quantity",

                dataType : "numeric",

                style : "my-column",

                width : 100,

                editRenderer : {

                    type : "InputEditRenderer",

                    onlyNumeric : true, // 0~9 입력가능

                    textAlign : "right", // 오른쪽 정렬로 입력되도록 설정

                    autoThousandSeparator : true // 천단위 구분자 삽입 여부

                }

            }, {

                dataField : "date",

                headerText : "Date"

            }],

 

            // 그리드 속성 정의

            auigridProps : {

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

                editable : true,

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

                selectionMode : "multipleCells",

                // 상태 칼럼 사용

                showStateColumn:true

            },

            // 그리드 데이터

            gridData : []

        }

    },

   

    watch: {

        // gridData 변경될 마다 기능이 실행됩니다.

        gridData: function () {

            let grid = this.$refs.myGrid;

            // gridData 변경 그리드에 다시 삽입

            grid.setGridData(this.gridData);

        }

    },

 

    mounted(){

        let grid = this.$refs.myGrid;

        // 그리드 생성

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

        // 초기 데이터

        this.requestMyData();

    },

 

    methods : {

        // 데이터 요청 메소드

        requestMyData() {

            // axios 모듈을 통하여 요청합니다.

            this.$http.get('http://localhost/data/getJson.php')

            .then((result) => {

                this.gridData = result.data;

            });

        },

        // 데이터 요청 버튼 클릭

        refreshBtnClick() {

         this.requestMyData();

        },

        addRow() {

            // 새행의 기본값 정의

            let item = {

                name : "NAME",

                country : "기본값"

            };

            // 하단에 1 추가

            this.$refs.myGrid.addRow(item, "last");

        },

        removeRow() {

            // 선택행() 삭제

            this.$refs.myGrid.removeRow("selectedIndex");

        },

        selectionChangeHandler(event) {

            // 셀렉션체인지 이벤트 핸들링

            let primeCell = event.primeCell;

            this.$refs.logger.innerText = event.type + " (" + primeCell.rowIndex + ", " + primeCell.columnIndex + ") vaule : " + primeCell.value;

        },

        cellClickHandler(event) {

            // 셀클릭 이벤트 핸들링

            this.$refs.logger2.innerText = event.type + " (" + event.rowIndex + ", " + event.columnIndex + ") vaule : " + event.value;

        }

    }

}

</script>

 

<style>

    .grid-wrap {

        width:100%;

        height:500px;

    }

    /* 커스텀 칼럼 스타일 정의 */

    .my-column {

        text-align:right;

    }

 

</style>