SystemJS에서 바닐라JS로 구현해보기

제품설치 및 실행 SystemJS에서 바닐라JS로 구현해보기

추천0

페이지 정보

작성자 MESCIUS

작성일 2020-09-04 14:24 조회 1,312회 댓글 0건

본문

관련링크

이 가이드는 PureJS(SystemJS) 데모 튜토리얼에서 VanilaJS로 쉽게 구현하는 것이 목표인 Wijmo 초보자분들을 대상으로 작성되었습니다.

PureJS 영문 튜토리얼 이외에 한글 튜토리얼 또한 마련되어 있으니 아래 첨부된 사이트 방문하시면 좀 더 다양한 Wijmo 기능에 대해 확인 하실 수 있습니다.

Wijmo PureJS 데모
: https://demos.wijmo.com/5/PureJS/LearnWijmo2/LearnWijmo/
PureJS(SystemJS) 전체 튜토리얼 가이드
: https://demo.mescius.co.kr/wijmo/learn-wijmo/
Wijmo 공식 문서
: https://wijmo-purejs.web.app/

Wijmo는 브라우저 버전 IE9 이상의 환경에서 작동을 지원합니다.

아직 Wijmo를 구매하지 않으셨다면 30일 무료 체험판을 신청해보시기 바랍니다.

데모 구현해보기

Grid의 컨트롤 중 하나인 FlexGridFilter를 이용하여 필터 기능이 있는 Grid를 생성해보도록 하겠습니다.

데모 페이지를 방문하고 싶으신 분들은 여기를 클릭하여 주시기 바랍니다.

1) 먼저 Wijmo_filter라는 폴더를 만들고 Visual Studio Code를 실행해줍니다. Wijmo_filter 폴더 아래 index.html 파일을 생성시켜 줍니다.

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GrapeCity Wijmo FlexGrid Excel-like Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

</body>


</html>

2) 데모에서는 SystemJS를 통해 모듈을 불러오고 있지만 우리는 PureJS를 CDN으로 참고하는 방식으로 진행할 예정입니다.

먼저 CDN 레퍼런싱 페이지를 방문하여 주시기 바랍니다.

필수적으로 추가해야 할 CDN 주소는 wijmo.min.css, wijmo.min.js 입니다. 기타 주소는 필요에 따라 추가해주시면 됩니다.

현재 데모에서 app.js를 열면 '@grapecity/wijmo.grid','@grapecity/wijmo.grid.filter'를 가져오는데 각각의 컨트롤을 확인하시고 CDN을 추가하시면 됩니다.

* 엑셀 유형의 필터를 실행 시키기 위해서는 wijmo.input.min.js 를 꼭 추가해주셔야 합니다.

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GrapeCity Wijmo FlexGrid Excel-like Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- 필수 -->
<link href="https://cdn.grapecity.com/wijmo/5.20202.699/styles/wijmo.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.min.js"></script>

 <!-- 옵션 -->
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.input.min.js"></script>
</head>

<body>

</body>

</html>

3) CDN을 추가한 다음, body 태그 안에 그리드를 보여줄 div 태그를 추가해주고 style.css, app.js를 미리 생성한 다음, link, script 태그로 가져와 줍니다.

<!DOCTYPE html>

<html lang="en">

<head>

(...)
<link href="./style.css" rel="stylesheet"/>
</head>

<body>
   <div class="container-fluid">
        <div id="theGrid"></div>
    </div>
</body>

<script src="./app.js" type="text/javascript"></script>
</html>

4) 이제 가장 중요한 app.js 파일을 열어 데모 코드를 그대로 가져와 확인해 보세요.

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridFilter from '@grapecity/wijmo.grid.filter';


document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    // generate some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
    for (var i = 0; i < 2000; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
        });
    }

   
    // FlexGridFilter client-side filtering
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data,
    });

    var filter = new wjGridFilter.FlexGridFilter(theGrid);
}

5) 먼저 npm을 사용하지 않는다면 import 문은 다 필요가 없습니다. 주의 깊게 봐야 하는 항목은 @grapecity로 시작되는 모듈입니다. @grapecity/wijmo.grid와 @grapecity/wijmo.grid.filter 이름을 각각 wjGrid, wjGridFilter로 바꾸어주었기 때문에 다시 원래 이름으로 바꿔줍니다.

window.onload = function() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
    for (var i = 0; i < 2000; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
        });

    }
    var theGrid = new wijmo.grid.FlexGrid('#theGrid', { // wjGrid => wijmo.grid
        itemsSource: data,
    });

    var filter = new wijmo.grid.filter.FlexGridFilter(theGrid); // wjGridFilter => wijmo.gird.filter

}

6) 다음으로는 style.css입니다. 아래 코드를 추가해 줍니다.

.wj-flexgrid {
  max-height: 250px;
  margin:10px 0;
}

body {
  margin-bottom: 20px;
}

7) 이제 index.html을 클릭하여 실행해 주세요. 다음과 같이 엑셀과 비슷한 필터 기능을 가진 그리드가 완성되었습니다.

구현과 관련하여 문의 사항이 있는 경우, 편하신 방법으로 문의 바랍니다.

* 오류가 발생하는 경우, 화면 스크린샷을 찍어주시거나, 해당 상황에 대해 명확히 설명해주시면 빠른 문제 해결에 도움이 됩니다.

포럼 : Wijmo - Q&A | 토론 게시판
Tel : 1670-0583