323 lines
7.3 KiB
Vue
323 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
import ToastGrid from '@/components/base/ToastGrid.vue';
|
|
|
|
const data = [
|
|
{
|
|
id: 549731,
|
|
name: 'Beautiful Lies',
|
|
artist: 'Birdy',
|
|
release: '2016.03.26',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Pop',
|
|
genreCode: '1',
|
|
grade: '4',
|
|
price: 10000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_attributes: {
|
|
expanded: true,
|
|
},
|
|
_children: [
|
|
{
|
|
id: 491379,
|
|
name: 'Chaos And The Calm',
|
|
artist: 'James Bay',
|
|
release: '2015.03.23',
|
|
type: 'EP',
|
|
typeCode: '2',
|
|
genre: 'Pop,Rock',
|
|
genreCode: '1,2',
|
|
grade: '5',
|
|
price: 12000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_children: [],
|
|
},
|
|
{
|
|
id: 498896,
|
|
name: 'The Magic Whip',
|
|
artist: 'Blur',
|
|
release: '2015.04.27',
|
|
type: 'EP',
|
|
typeCode: '2',
|
|
genre: 'Rock',
|
|
genreCode: '2',
|
|
grade: '3',
|
|
price: 15000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_attributes: {
|
|
expanded: false,
|
|
},
|
|
},
|
|
{
|
|
id: 450720,
|
|
name: "I'm Not The Only One",
|
|
artist: 'Sam Smith',
|
|
release: '2014.09.15',
|
|
type: 'Single',
|
|
typeCode: '3',
|
|
genre: 'Pop,R&B',
|
|
genreCode: '1,3',
|
|
grade: '4',
|
|
price: 8000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_attributes: {
|
|
expanded: true,
|
|
},
|
|
_children: [
|
|
{
|
|
id: 587871,
|
|
name: 'This Is Acting',
|
|
artist: 'Sia',
|
|
release: '2016.10.22',
|
|
type: 'EP',
|
|
typeCode: '2',
|
|
genre: 'Pop',
|
|
genreCode: '1',
|
|
grade: '3',
|
|
price: 20000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_attributes: {
|
|
expanded: true,
|
|
},
|
|
_children: [
|
|
{
|
|
id: 490500,
|
|
name: 'Blue Skies',
|
|
release: '2015.03.18',
|
|
artist: 'Lenka',
|
|
type: 'Single',
|
|
typeCode: '3',
|
|
genre: 'Pop,Rock',
|
|
genreCode: '1,2',
|
|
grade: '5',
|
|
price: 6000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 317659,
|
|
name: "I Won't Give Up",
|
|
artist: 'Jason Mraz',
|
|
release: '2012.01.03',
|
|
type: 'Single',
|
|
typeCode: '3',
|
|
genre: 'Pop',
|
|
genreCode: '1',
|
|
grade: '2',
|
|
price: 7000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 583551,
|
|
name: 'Following My Intuition',
|
|
artist: 'Craig David',
|
|
release: '2016.10.01',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'R&B,Electronic',
|
|
genreCode: '3,4',
|
|
grade: '5',
|
|
price: 15000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 436461,
|
|
name: 'X',
|
|
artist: 'Ed Sheeran',
|
|
release: '2014.06.24',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Pop',
|
|
genreCode: '1',
|
|
grade: '5',
|
|
price: 20000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 295651,
|
|
name: 'Moves Like Jagger',
|
|
release: '2011.08.08',
|
|
artist: 'Maroon5',
|
|
type: 'Single',
|
|
typeCode: '3',
|
|
genre: 'Pop,Rock',
|
|
genreCode: '1,2',
|
|
grade: '2',
|
|
price: 7000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 541713,
|
|
name: 'A Head Full Of Dreams',
|
|
artist: 'Coldplay',
|
|
release: '2015.12.04',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Rock',
|
|
genreCode: '2',
|
|
grade: '3',
|
|
price: 25000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
_attributes: {
|
|
expanded: false,
|
|
},
|
|
_children: [
|
|
{
|
|
id: 294574,
|
|
name: '4',
|
|
artist: 'Beyoncé',
|
|
release: '2011.07.26',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Pop',
|
|
genreCode: '1',
|
|
grade: '3',
|
|
price: 12000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 265289,
|
|
name: '21',
|
|
artist: 'Adele',
|
|
release: '2011.01.21',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Pop,R&B',
|
|
genreCode: '1,3',
|
|
grade: '5',
|
|
price: 15000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 555871,
|
|
name: 'Warm On A Cold Night',
|
|
artist: 'HONNE',
|
|
release: '2016.07.22',
|
|
type: 'EP',
|
|
typeCode: '1',
|
|
genre: 'R&B,Electronic',
|
|
genreCode: '3,4',
|
|
grade: '4',
|
|
price: 11000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 550571,
|
|
name: 'Take Me To The Alley',
|
|
artist: 'Gregory Porter',
|
|
release: '2016.09.02',
|
|
type: 'Deluxe',
|
|
typeCode: '1',
|
|
genre: 'Jazz',
|
|
genreCode: '5',
|
|
grade: '3',
|
|
price: 30000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 544128,
|
|
name: 'Make Out',
|
|
artist: 'LANY',
|
|
release: '2015.12.11',
|
|
type: 'EP',
|
|
typeCode: '2',
|
|
genre: 'Electronic',
|
|
genreCode: '4',
|
|
grade: '2',
|
|
price: 12000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 366374,
|
|
name: 'Get Lucky',
|
|
artist: 'Daft Punk',
|
|
release: '2013.04.23',
|
|
type: 'Single',
|
|
typeCode: '3',
|
|
genre: 'Pop,Funk',
|
|
genreCode: '1,5',
|
|
grade: '3',
|
|
price: 9000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
{
|
|
id: 8012747,
|
|
name: 'Valtari',
|
|
artist: 'Sigur Rós',
|
|
release: '2012.05.31',
|
|
type: 'EP',
|
|
typeCode: '3',
|
|
genre: 'Rock',
|
|
genreCode: '2',
|
|
grade: '5',
|
|
price: 10000,
|
|
downloadCount: 1000,
|
|
listenCount: 5000,
|
|
},
|
|
];
|
|
|
|
const columns = [
|
|
{ header: 'Name', name: 'name', width: 300 },
|
|
{ header: 'Artist', name: 'artist' },
|
|
{ header: 'Type', name: 'type' },
|
|
{ header: 'Release', name: 'release' },
|
|
{ header: 'Genre', name: 'genre' },
|
|
{ header: 'checkbox', name: 'checkbox', editor:{ type: 'checkbox', options: {
|
|
listItems: [
|
|
{ text: 'true', value: true },
|
|
]
|
|
}}}
|
|
];
|
|
const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
|
|
|
|
const grid1Ref = ref();
|
|
|
|
function onClearClick() {
|
|
//grid1Ref.value?.clearGrid();
|
|
grid1Ref.value?.api()?.clear();
|
|
}
|
|
|
|
function onUpdateClick() {
|
|
//grid1Ref.value?.clearGrid();
|
|
console.log(grid1Ref.value?.api()?.getModifiedRows());
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<button @click="onClearClick">clear api</button>
|
|
<br>
|
|
<button @click="onUpdateClick">update list</button>
|
|
<ToastGrid
|
|
ref="grid1Ref"
|
|
:data="data"
|
|
:columns="columns"
|
|
:treeColumnOptions="treeColumnOptions"
|
|
/>
|
|
</div>
|
|
</template> |