작성일 2021-07-19 18:17 조회 3,891회
댓글 0건
안녕하세요...
일반 npm 방식으로 아닌 cdn 으로 그리드를 사용중입니다.
개발환경
vue.js : cdn
wijmo Grid : cdn
위와 같은 환경에서 그리드 사용방법을 알고 싶습니다.
데이터을 가져와서 그리드에 보여지는 모습을 한번 보고 싶습니다.
한번 보시고 확인 한번 부탁드립니다.
등록된 댓글이 없습니다.
1 답변
작성일 2021-07-20 11:18 댓글 0건
안녕하세요 그레이프시티입니다.
문의 주신 CDN 방식으로 Wijmo Vue.js 설정 방법과 관련하여 답변 드립니다.
1. 먼저 Vue, Wijmo, Wijmo의 Vue interop 모듈을 레퍼런스 추가를 해줍니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Wijmo 호출-->
<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>
<!-- Wijmo/Vue interop -->
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/interop/vue2/wijmo.vue2.min.js"></script>2. Vue 객체를 생성하고 호스트 요소를 설정합니다.
<script>
window.onload = function () {
var testView = new Vue({
el: '#app',
data: function () {
return {
data: getData()
}
},
})
function getData() {
// generate some random data
let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}
</script>3. Vue의 호스트 요소에 FlexGrid 컨트롤을 추가하고 데이터를 바인딩해줍니다.
<div id="app">
<wj-flex-grid :items-source="data">
</wj-flex-grid>
</div>4. 그리드를 스타일링하고 싶으신 경우, CSS를 이용하여 폭, 넓이, 색깔 등을 조절하실 수 있습니다.
[Vue2 interop]
https://demo.grapecity.co.kr/wijmo/api/modules/wijmo_vue2_grid.html#wjflexgrid
도움말 문서도 같이 전달 드리오니 확인 부탁 드립니다.
다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.
등록된 댓글이 없습니다.
