728x90
원래는 vuetify 의 tables 을 좋아하지만, 파트너사 페이지를 제작하던 도중 클라이언트에게 자유도를 주는게 필요할거 같다는 이야기가 나와 엑셀과 비슷한 기능을 제공하는 테이블 도입이 필요하게 되었다.
두개의 후보가 나왔는데, 두가지 모두 테스트코드를 작성해본 결과 jQWidgets의 jqxGrid 을 사용하기로 했다.
Jspreadsheet vs 🙋♀️jQWidgets > jqxGrid🙋♀️
(Jspreadsheet: bossanova.uk/jspreadsheet/v4/examples/vue)
(jQWidgets > jqxGrid: www.jqwidgets.com/vue/vue-grid/)
jqxGrid 사용하기
jqwidgets-scripts 설치
$ yarn add jqwidgets-scripts
▷ public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="https://www.jqwidgets.com/vue/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://www.jqwidgets.com/vue/scripts/demos.js"></script>
</head>
<body>
...
</body>
</html>
▷ src/App.vue
...
<script>
export default {
data: () => ({
menus: [
{
title: '홈',
icon: 'mdi-home',
to: '/home',
},
{
title: '엑셀',
icon: 'mdi-file-excel',
to: '/excel',
},
],
drawer: true,
}),
methods: {
logout() {
this.$router.push('/logout')
},
},
}
</script>
▷ src/components/Excel/Main.vue
<template>
<v-container fluid>
<v-row class="mt-3 mx-1">
<v-col class="px-1" cols="12" xs="12" sm="12" md="12" lg="12">
<JqxGrid ref="myGrid"
width="100%" :source="dataAdapter" :columns="columns"
:editable="true" :enabletooltips="true" :selectionmode="'multiplecellsadvanced'"
:autoheight="true" :altrows="true"
:columnsresize="true"
>
</JqxGrid>
</v-col>
</v-row>
</v-container>
</template>
<script>
import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
export default {
name: 'Excel',
components: {
JqxGrid
},
beforeCreate: function() {
this.source = {
localdata: [{
id: 1,
firstname: 'yoni',
lastname: 'kim',
productname: 'tistory',
available: true,
quantity: 1,
price: 10000000000,
total: 1
}],
datafields: [
{ name: 'id', type: 'number' },
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
datatype: 'json'
}
},
data: function () {
return {
// eslint-disable-next-line
getWidth: getWidth('grid'),
// eslint-disable-next-line
dataAdapter: new jqx.dataAdapter(this.source),
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200, cellsalign: 'center', align: 'center' },
{ text: 'Last Name', datafield: 'lastname', width: 200, cellsalign: 'center', align: 'center' },
{ text: 'Product', datafield: 'productname', width: 180, cellsalign: 'center', align: 'center' },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'center', align: 'center' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'center', align: 'center', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'center', align: 'center', cellsformat: 'c2' }
]
}
},
}
</script>
▷ src/router/index.js
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Excel from '@/components/Excel/Main'
import LogoutSuccess from '@/components/Logout'
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', name: 'Index', component: Home, },
{ path: '/home', name: 'Home', component: Home, },
{ path: '/excel', name: 'Excel', component: Excel, },
{ path: '/logout', component: LogoutSuccess, }
]
})
export default router728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] Jspreadsheet 사용하기 (0) | 2021.05.13 |
|---|---|
| [Vue.js] vue-cookie 사용하기 (0) | 2021.05.13 |
| [Vue.js] vuetify, vue-router 세팅하기 (0) | 2021.04.28 |
| [Vue.js] VueJS 프로젝트 시작하기 (0) | 2021.04.27 |
