AUISoft
AUIGrid 3.0.10 Documentation
 

Chapter 4. AUIGrid.vue 제외하고 AUIGrid 사용하기

 

1. 사전 필요 사항

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

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

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

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

2. AUIGrid.vue 의 사용 목적

AUIGrid.vue Vue.js 프레임워크 환경에서 사용자들이 쉽게 사용하기 위해 작성된 컴포넌트입니다.

Navtive Javascript(jQuery 포함) 환경에서는 DOM에 직접적으로 접근하여 컨트롤 하는게 일반적이였습니다. 그러나 Vue.js 는 프레임워크 구조 상 직접적으로 DOM에 접근은 가능하나 권장하지 않습니다.

다른 여러가지 방법으로 DOM의 특정 엘리먼트에 접근하여 컨트롤 합니다.

여기서 AUIGrid.vue Vue.js ref 속성을 통하여 접근하도록 하였습니다.

다음처럼 AUIGrid 정의할 때 ref 임의로 지정합게 됩니다.

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

</AUIGrid>

 

그리고 다음처럼 접근할 수 있습니다.

this.$refs.myGrid.원하는 메소드

 

이와 같이 접근할 수 있도록 작성된 컴포넌트가 AUIGrid.vue 입니다.

3. AUIGrid.vue 제외하고 AUIGrid 작성하기

Native Javascript(jQuery 포함) 환경에서 작성하듯 template 에서 다음과 같이 div 태그를 작성합니다.

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png" />

    <!-- 에이유아이 그리드가 이곳에 생성됩니다. -->

    <div

      id="grid_wrap"

      style="width:1200px; height:480px; margin:0 auto;"

    ></div>

  </div>

</template>

위의 div 태그에 id grid_wrap이라고 정의한 모습입니다.

 

다음과 같이 mounted 라이프 사이클에서 그리드를 생성할 수 있습니다.

mounted: function() {

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

    window.AUIGrid.setGridData(this.myGridID, this.gridData);

},

 

beforeDestroy: function() {

    if (window.AUIGrid.isCreated(this.myGridID))

      window.AUIGrid.destroy(this.myGridID);

}

 

SPA 프로젝트로 구성된 경우 동적으로 Vue 컴포넌트는 생성되고, 제거 될 것입니다.

이 때 AUIGrid 도 동일하게 제거하기 위해 beforeDestroy 라이프 사이클에서 제거하고 있습니다.

이를 잊지 마시고 제거하십시오.