! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

웹 응용 프로그램에서 Vue DataGrid를 빠르게 만드는 방법 > 온라인 스터디

본문 바로가기

FlexGrid 웹 응용 프로그램에서 Vue DataGrid를 빠르게 만드는 방법

페이지 정보

작성자 GrapeCity 작성일 2021-12-15 11:49 조회 858회 댓글 0건

본문

DataGrid는 UI 출현 이래 가장 일반적인 시각적 소프트웨어 요소로 자리잡았습니다. 데이터 그리드는 최대한 많은 데이터를 최대한 빨리 받아들이고 이해하는 데 유용합니다. 이제는 데이터 표시뿐 아니라 편집에도 DataGrid가 아주 유용한 시대가 되었습니다.

대다수 사용자는 정렬, 자동 완성과 같은 자동 편의 기능과 사용자 정의 수식과 같은 고급 기능을 갖춘 Microsoft Excel을 당연히 선택하게 됩니다. 사용자가 Excel을 선택하는 이유는 익숙하기 때문입니다.

Excel이 데이터 그리드를 사용하는 소프트웨어의 가장 일반적인 예시가 되었지만 이 패러다임은 소프트웨어 분야에서 더욱 강화되어 왔습니다. 웹 앱이 기존의 기본 애플리케이션을 계속 대체하고 있기 때문에 데이터 그리드가 웹 앱 UI로 이동하는 것이 당연합니다.

시장에는 오픈 소스, 타사 및 자체 개발 등 수많은 JavaScript DataGrid가 있습니다. 이 중에 어떤 것을 선택해야 할까요?

FlexGrid가 작동하는 모습을 확인하고 Vue DataGrid 개요 샘플을 통해 FlexGrid에 대해 자세히 알아보세요.

Wijmo 사본은 NPM, CDN에서 얻거나 GrapeCity 사이트에서 다운로드할 수 있습니다.

이제 FlexGrid를 작동하여 사용자 정의 가능한 Angular DataGrid를 몇 분 내로 빌드해 보겠습니다. Google의 웹 프레임워크인 Angular와 함께 FlexGrid를 사용하는 방법을 보여드리기 위해 다음 응용 프로그램을 사용하려고 합니다.

Stackblitz를 사용해 샘플을 만들었으므로 유지 관리하고 공유하기 쉽습니다.

그러면 시작해 보겠습니다!




Vue 응용 프로그램을 만드는 방법

이 응용 프로그램의 사본을 만들려면 다음 단계를 따르십시오.

  1. Stackblitz를 엽니다.

  2. 화면 상단의 "Vue 3" 버튼을 클릭합니다.

  3. 프로젝트의 의존성 목록에 다음 dependency를 추가합니다.

의존성



 

필수 모듈을 가져오는 방법

Wijmo 컨트롤을 사용하여 FlexGrid를 만들기 전에 필요한 모듈을 가져올 수 있는지 확인해야 합니다. 이 샘플에서는 FlexGrid 모듈과 FlexGridFilter 모듈을 모두 사용합니다. App.vue 파일에서 다음 코드를 추가합니다.

import '@grapecity/wijmo.vue2.grid';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.vue2.grid';
import * as wjcGridFilter from '@grapecity/wijmo.vue2.grid.filter';




 

응용 프로그램 스타일 지정

또한 그리드에 대한 스타일 지정을 포함해야 합니다. 이 샘플에서는 컨트롤에 Wijmo의 Angular Material 테마를 사용합니다. App.vue 파일에서 다음 코드를 추가합니다.

import '@grapecity/wijmo.styles/wijmo.css';



 

Wijmo 컴포넌트에 대한 액세스 설정

마지막으로, 파일의 마크업에서 응용 프로그램의 component 속성 내에 컴포넌트를 만듭니다.

components: {
  'wj-flex-grid': wjcGrid.WjFlexGrid,
  'wj-flex-grid-column': wjcGrid.WjFlexGridColumn,
  'wj-flex-grid-filter': wjcGridFilter.WjFlexGridFilter
}


이제 마크업에서 이러한 컴포넌트를 태그로 사용하여 FlexGrid용 자체 컴포넌트를 만들 수 있습니다.



 

그리드에 데이터 소스 추가

데이터 소스는 App.vue 파일에 저장되고 가져오기 호출을 사용하여 외부 데이터 소스에서 데이터를 가져옵니다.

data: function() {
  let view = new wjcCore.CollectionView([], {
      groupDescriptions: ['make'],
  });
  fetch('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26').then((result) => result.json()).then((data) => {
      view.sourceCollection = data;
  });
  return {
      data: view,
  };
}


이 응용 프로그램에서는 view 변수에 할당되는 CollectionView(제조업체를 기준으로 그룹화됨)를 만들어 데이터를 노출합니다. 데이터는 컴포넌트의 구성자 내에서 비동기식으로 로드됩니다. 데이터는 수신된 후 CollectionView의 sourceCollection 속성에 할당되어 응용 프로그램에서 사용할 수 있게 됩니다.



 

Vue에서 데이터를 시각화하는 방법

마지막 단계로, 그리드를 비롯한 UI를 렌더링하는 App.vue 파일의 템플릿에서 FlexGrid의 마크업을 구현합니다.

<template>
  <div id="app">
      <h1>2021 Sedans (Vue)</h1>
      <p>Sort by model and price by clicking the column headers. Filter by value or condition by clicking the filter icons in the column headers. Collapse and expand makes to see all the models. Select one or more models with the mouse or keyboard and copy your selection to the clipboard.</p>
      <wj-flex-grid :itemsSource="data" :allowResizing="'None'" :isReadOnly="true" :selectionMode="'ListBox'" :headerVisibility="'Column'" :alternatingRowStep="0">
          <wj-flex-grid-column binding="make" header="Make" :visibility="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>
</template>


응용 프로그램에는 표시되는 모델과 제조업체의 수에 관한 요약 외에도 응용 프로그램에 대한 간단한 설명이 포함됩니다. 요약에 있는 수는 사용자가 데이터를 필터링할 때 자동으로 업데이트됩니다.

그 아래에는 itemsSource, 표시할 열, 속성 등 그리드의 속성을 초기화하는 FlexGrid 요소가 나옵니다.

열 속성에는 각 열의 바인딩, 헤더, 서식, 너비가 있습니다. 가격 열의 aggregate 속성으로 인해 그룹 헤더의 각 제조업체에 대한 평균 가격이 그리드에 표시됩니다.

FlexGrid 요소에는 사용자가 모델과 가격을 기준으로 그리드 데이터를 필터링할 수 있도록 열 필터를 추가하는 FlexGridFilter 요소가 포함되어 있습니다.




응용 프로그램을 실행하는 방법

이제 다 끝났습니다! 2021 Sedans 응용 프로그램의 Vue 버전이 준비되었습니다.

sedan





지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.