쉽고 빠르게 VUE 그리드 만들기

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-01-31 14:08 조회 8,903회 댓글 0건

검색

본문

관련링크

데이터 그리드는 가장 일반적인 시각 소프트웨어 요소 중 하나입니다. 그리드은 우리 모두가 가능한 한 많은 데이터를 가능한 빨리 받아들이고 이해하도록 도와줍니다. 데이터 그리드는 데이터를 표시 할뿐만 아니라 편집할 때에도 그 어느 것보다 유용합니다.

시장에는 오픈 소스, 타사 및 자체 개발 된 많은 JavaScript 데이터 그리드가 있지만, 전 세계의 많은 개발자들은 편의성, 다양한 기능, 고성능의 데이터 시각화를 제공하는 Wijmo의 FlexGrid를 선택하고 있습니다.

Wijmo 데모를 통해 FlexGrid가 실제로 작동하는 것을 확인할 수 있습니다 . NPM이나 CDN에서 가져오거나 홈페이지에서 다운로드할 수 있습니다.

이제 FlexGrid를 적용하여 몇 분 안에 맞춤형 React 데이터 그리드를 구축해 보겠습니다 .

아래의 애플리케이션은 Evan You의 JavaScript 프레임워크인 Vue와 함께 FlexGrid를 사용하는 방법을 보여줍니다 .

https://stackblitz.com/edit/vue-ugm2h7

해당 샘플에서는 stackblitz 에디터를 사용하여 샘플을 만들어보고자 합니다. 웹 상에서 쉽게 코드를 작성고 유지 보수 및 공유가 용이합니다.

Vue 앱 만들기

앱 만들려면 다음 단계를 수행하십시오.

stackblitz Vue 스타터 프로젝트를 엽니다.
종속성 목록에 "wijmo"를 입력하여 프로젝트에 Wijmo를 추가하십시오.

필요한 모듈 가져오기

필요한 모듈을 가져 오려면 다음과 같이 index.js 파일을 편집하십시오.

// index.js
import Vue from 'vue';

import { CollectionView } from 'wijmo/wijmo';
import 'wijmo/wijmo.vue2.grid';
import 'wijmo/wijmo.vue2.grid.filter';

위 코드는 앱에 데이터를 제공하는 사용되는 CollectionView 클래스를 가져옵니다. 또한, 데이터를 표시하는 데 사용되는 FlexGrid 및 FlexGridFilter 클래스를 가져옵니다.

그리드에 데이터 소스 추가

데이터 소스를 추가하려면 다음과 같이 index.js 파일을 편집하십시오.

// index.js
new Vue({
  el: '#app',
  data: function() {

    // create CollectionView
    let view = new CollectionView([], {
      groupDescriptions: ['make']
    });

    // load it asynchronously
    fetch('https://api.myjson.com/bins/cqvk8')
      .then(result => result.json())
      .then(data => {
        view.sourceCollection = data;
      });

    // done
    return {
      data: view
    }
  }
});

"#app" 요소에 위차할, Vue 컴포넌트를 작성합니다. 컴포넌트의 "data"함수에서는 CollectionView를 작성하고, fetch를 사용하여 비동기적으로 로드합니다. CollectionView는 컴포넌트의 상태(state)인 "data" 멤버로 반환됩니다.

데이터 표시

index.html 파일은 응용 프로그램의 UI를 정의합니다. Wijmo 스타일을 가져오고, 그리드 크기 및 응용 프로그램 글꼴을 정의하는 스타일 요소를 작성합니다.

<!-- index.html -->
<style>
@import "../node_modules/wijmo/styles/themes/wijmo.theme.material.css";
body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}
</style>

스타일 요소를 작성한 다음, 그리드의 헤더(header)와 요약(summary) 섹션을 정의합니다 :

<!-- index.html -->  
<div id="app">  
  <h1>  
    2019 Sedans (Vue)  
  </h1>  
  <p>  
    Sort by model … </p>  
  <p>  
    Showing  
    <b>{{data.items ? data.items.length : 0}}</b> models from  
    <b>{{data.groups ? data.groups.length : 0}}</b> makes.</p>  
  </p>  
  <wj-flex-grid  
    allow-resizing="None"  
    :show-alternating-rows="false"  
    :is-read-only="true"  
    selection-mode="ListBox"  
    headers-visibility="Column"  
    :items-source="data">  

    <wj-flex-grid-column  
      binding="make" header="Make" :visible="false" width="*">  
    </wj-flex-grid-column>  
    <wj-flex-grid-column  
      binding="model" header="Model" width="*">  
    </wj-flex-grid-column>  
    <wj-flex-grid-column  
      binding="price" header="Price" format="c0" aggregate="Avg" width=".5*">  
    </wj-flex-grid-column>  

    <wj-flex-grid-filter></wj-flex-grid-filter>  

  </wj-flex-grid>  
</div>