Bootstrap Table per Browser

Scopri come utilizzare il componente Vue di Bootstrap Table nel tuo progetto utilizzando il browser.

In questa pagina

JavaScript per VueJS

Oltre ai file menzionati in Avvio rapido, devi anche includere il nostro file del componente Vue.

<script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>

Utilizzo

<div id="app">
  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>

<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup () {
      const columns = ref([
        {
          field: 'state',
          checkbox: true
        },
        {
          title: 'ID Articolo',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Nome Articolo'
        },
        {
          field: 'price',
          title: 'Prezzo Articolo'
        },
        {
          field: 'action',
          title: 'Azioni',
          align: 'center',
          formatter () {
            return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
          },
          events: {
            'click .like' (e, value, row) {
              alert(JSON.stringify(row))
            }
          }
        }
      ])
      const data = ref([
        {
          id: 0,
          name: 'Articolo 0',
          price: '$0'
        },
        {
          id: 1,
          name: 'Articolo 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Articolo 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Articolo 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Articolo 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Articolo 5',
          price: '$5'
        }
      ])
      const options = ref({
        search: true,
        showColumns: true
      })

      return {
        columns,
        data,
        options
      }
    }
  })

  app.component('BootstrapTable', BootstrapTable)
  app.mount('#app')
</script>

Modello di partenza

<!doctype html>
<html lang="it">
  <head>
    <!-- Meta tag necessari -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ciao, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.css">
  </head>
  <body>
    <div id="app">
      <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
    </div>

    <script src="https://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>
    <script>
      const { createApp, ref } = Vue
      const app = createApp({
        setup () {
          const columns = ref([
            {
              field: 'state',
              checkbox: true
            },
            {
              title: 'ID Articolo',
              field: 'id'
            },
            {
              field: 'name',
              title: 'Nome Articolo'
            },
            {
              field: 'price',
              title: 'Prezzo Articolo'
            },
            {
              field: 'action',
              title: 'Azioni',
              align: 'center',
              formatter () {
                return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
              },
              events: {
                'click .like' (e, value, row) {
                  alert(JSON.stringify(row))
                }
              }
            }
          ])
          const data = ref([
            {
              id: 0,
              name: 'Articolo 0',
              price: '$0'
            },
            {
              id: 1,
              name: 'Articolo 1',
              price: '$1'
            },
            {
              id: 2,
              name: 'Articolo 2',
              price: '$2'
            },
            {
              id: 3,
              name: 'Articolo 3',
              price: '$3'
            },
            {
              id: 4,
              name: 'Articolo 4',
              price: '$4'
            },
            {
              id: 5,
              name: 'Articolo 5',
              price: '$5'
            }
          ])
          const options = ref({
            search: true,
            showColumns: true
          })

          return {
            columns,
            data,
            options
          }
        }
      })

      app.component('BootstrapTable', BootstrapTable)
      app.mount('#app')
    </script>
  </body>
</html>