bio_frontend/pages/[tabId]/tui.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>