제품설치 및 실행 SystemJS에서 바닐라JS로 구현해보기
페이지 정보
작성자 MESCIUS 작성일 2020-09-04 14:24 조회 1,314회 댓글 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
댓글목록
등록된 댓글이 없습니다.