Membuat Datatable Menjadi Editable Di Vue JS

Dalam aplikasi berbasis data, tabel data digunakan untuk menampilkan data dalam format tabel dengan kemampuan untuk mengedit dan menghapus catatan pada tempatnya. Saat Anda bekerja dengan Vue, ada komponen sumber terbuka yang berbeda yang dapat digunakan dengan mudah tambahkan tabel data ke aplikasi Anda.

Banyak aplikasi saat ini memiliki fitur real-time, dan Anda mungkin bertanya-tanya bagaimana Anda dapat menyinkronkan pengeditan dan penghapusan data secara real-time.Ada tiga opsi untuk ini:

1. Gunakan WebSocket API Ini bukan pilihan yang baik jika beberapa pengguna Anda menggunakan browser yang belum mendukung WebSocket.
2. Gunakan perpustakaan yang mengabstraksi perbedaan lintas-browser ini dengan mekanisme fallback, seperti Socket.IO, SignalR, dan SockJS. Dengan opsi ini, Anda harus mengelola server yang menangani sejumlah besar koneksi terbuka dan menangani penskalaan.
3. Gunakan layanan yang menyediakan perpustakaan yang melakukan hal yang sama seperti opsi sebelumnya, tetapi mengelola server dan menskalakan dengan tepat.

Saya akan menunjukkan cara membuat tabel data real-time yang dapat diedit di Vue.js menggunakan Hamoni Sync sebagai layanan sinkronisasi status real-time.Gambar di bawah ini menunjukkan apa yang akan kita buat:

Untuk mengikuti, Anda harus memiliki beberapa pengetahuan dasar tentang Vue. Jika Anda tidak memiliki pengetahuan tentang Vue, Anda dapat membaca posting saya sebelumnya untuk mendapatkan kecepatan dengan Vue.js.

1. Node.js & npm (ikuti tautan untuk mengunduh penginstal untuk OS Anda)
2. Vue CLI untuk membuat perancah proyek Vue baru. Jika Anda tidak memilikinya, jalankan npm install -g [email protected] dari baris perintah untuk menginstalnya.

mengatur proyek

Kami akan menyiapkan proyek menggunakan Vue CLI dan template dari Vuetify. Buka baris perintah dan jalankan perintah vue init vuetifyjs/simple realtime-datatable-vue. Anda akan dimintai nama dan penulis, jadi terimalah nilai default dengan menekan enter untuk setiap prompt. Ini akan membuat proyek Vue baru dengan satu file index.html.

File ini berisi referensi skrip ke Vue dan Vuetify.Vuetify adalah Komponen Desain Material untuk Vue.js.

Tambahkan komponen tabel data

Buka file index.html dengan editor teks Anda (atau IDE).Ganti konten pada baris 50 dengan yang berikut:

<div>
    <v-dialog v-model="dialog" max-width="500px">
    <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
    <v-card>
        <v-card-title>
        <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
        <v-container grid-list-md>
            <v-layout wrap>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
            </v-flex>
            </v-layout>
        </v-container>
        </v-card-text>
        <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>
        <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>
        </v-card-actions>
    </v-card>
    </v-dialog>
    <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="justify-center layout px-0">
        <v-btn icon class="mx-0" @click="editItem(props.item)">
            <v-icon color="teal">edit</v-icon>
        </v-btn>
        <v-btn icon class="mx-0" @click="deleteItem(props.item)">
            <v-icon color="pink">delete</v-icon>
        </v-btn>
        </td>
    </template>
    </v-data-table>
</div>

Kode di atas menambahkan komponen v-dialog untuk menampilkan dialog untuk mengumpulkan data untuk record baru atau mengedit record yang sudah ada. Selain itu, menambahkan v-data-table yang merender tabel. Setelah baris 126, tambahkan kode berikut ke properti data:

dialog: false,
headers: [
    {
        text: 'Dessert (100g serving)',
        align: 'left',
        sortable: false,
        value: 'name'
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Actions', value: 'name', sortable: false }
],
desserts: [],
editedIndex: -1,
editedItem: {
    name: '',
    calories: 0,
    fat: 0,
    carbs: 0,
    protein: 0
},
defaultItem: {
    name: '',
    calories: 0,
    fat: 0,
    carbs: 0,
    protein: 0
},
listPrimitive: null

Properti desserts data akan menyimpan data yang akan ditampilkan dalam tabel. Properti editedItem akan menyimpan nilai untuk record yang sedang diedit, dan editedIndex akan menyimpan indeks record yang sedang diedit.

Tambahkan properti berikut setelah definisi properti data, setelah baris 189:

computed: {
    formTitle() {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    }
},watch: {
    dialog(val) {
        val || this.close()
    }
},

Kami menambahkan properti computed dan watch. Properti computed mendefinisikan formTitle yang memberikan komponen dialog sebuah judul berdasarkan nilai dari editedIndex. Properti watch melihat dialog ketika nilainya berubah. () yang akan ditentukan kemudian.

Tambahkan Sinkronisasi Hamoni

Di persimpangan ini kita perlu menambahkan Hamoni Sync. Ini digunakan untuk menyinkronkan status aplikasi, dan menangani resolusi konflik untuk menghindari satu pengguna mengesampingkan data pengguna lain. Untuk menggunakan Hamoni Sync, Anda harus mendaftar untuk akun dan ID aplikasi Ikuti langkah-langkah ini untuk membuat aplikasi di Hamoni.

1. Daftar dan masuk ke dasbor Hamoni.
2. Masukkan nama aplikasi pilihan Anda di bidang teks dan klik tombol buat.
3. Klik tombol “Tampilkan ID Akun” untuk melihat ID akun Anda.

Di bawah referensi skrip ke Vuetify pada baris 139, tambahkan referensi ke Hamoni Sync:

<script src="https://unpkg.com/[email protected]/hamoni.dev.js">
</script>

Kemudian kita perlu menginisialisasi Hamoni Sync setelah komponen Vue dipasang.

mounted: function () {
    let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");    hamoni.connect().then(() => {
        hamoni
          .get("vue-table")
          .then(primitive => {
            this.listPrimitive = primitive
            this.desserts = [...primitive.getAll()]
            this.subscribeToUpdate()
          }).catch(error => {
              if (error === "Error getting state from server") {
                this.initialise(hamoni);
              }
              else {
                 alert(error);
              }
          })
    }).catch(alert)
},

Dari kode di atas, kami menginisialisasi Hamoni Sync dengan akun dan ID aplikasi. Ganti string placeholder dengan akun dan ID aplikasi dari dasbor. Kemudian terhubung ke server Hamoni dengan memanggil hamoni.connect() yang mengembalikan janji.

Setelah terhubung, kita memanggil hamoni.get() dengan nama state yang disimpan di Hamoni. Untuk mengambil state dari Hamoni, ia harus dibuat, jika tidak maka akan mengembalikan kesalahan. Apa yang telah saya lakukan di sini menangani kesalahan ini di dalam blok tangkap, sehingga memanggil fungsi lain untuk menginisialisasi status di Hamoni Sync.

Jika panggilan untuk mendapatkan status aplikasi berhasil, ia mengembalikan objek yang akan digunakan untuk mengubah data yang terkandung dalam status itu. Objek ini disebut sebagai primitif Sync. Ada tiga jenis primitif Sync:

1. Nilai Primitif: Status semacam ini menyimpan informasi sederhana yang direpresentasikan dengan tipe data seperti string, boolean, atau angka.
2. Objek Primitif: Status objek mewakili status yang dapat dimodelkan sebagai objek JavaScript. Contoh penggunaan dapat menyimpan skor game.
3. Daftar Primitif: Ini memegang daftar objek negara. Objek status adalah objek JavaScript. Anda dapat memperbarui item berdasarkan indeksnya dalam daftar.

Kami telah menggunakan daftar primitif untuk contoh ini. Kami memanggil primitif.getAll() untuk mendapatkan status dan meneruskannya ke makanan penutup. Setelah itu, ia memanggil fungsi subscribeToUpdate().Fungsi ini akan digunakan untuk berlangganan peristiwa perubahan status dari Hamoni Sync.

Tambahkan kode berikut setelah properti mount pada baris 215:

methods: {
  initialise(hamoni) {
    hamoni.createList("vue-table", [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0
      }
    ]).then(primitive => {
      this.listPrimitive = primitive
      this.desserts = this.listPrimitive.getAll()
      this.subscribeToUpdate();
    }).catch(alert)
  },  subscribeToUpdate() {
    this.listPrimitive.onItemAdded(item => {
      this.desserts.push(item.value)
    })    this.listPrimitive.onItemUpdated(item => {
      //update the item at item.index
      this.desserts.splice(item.index, 1, item.value);
    })    this.listPrimitive.onItemDeleted(item => {
      //remove the item at item.index
      this.desserts.splice(item.index, 1);
    })
  },  editItem(item) {
    this.editedIndex = this.desserts.indexOf(item)
    this.editedItem = Object.assign({}, item)
    this.dialog = true
  },  deleteItem(item) {
    const index = this.desserts.indexOf(item)
    confirm('Are you sure you want to delete this item?') && this.listPrimitive.delete(index)
  },  close() {
    this.dialog = false
    setTimeout(() => {
      this.editedItem = Object.assign({}, this.defaultItem)
      this.editedIndex = -1
    }, 300)
  },  save() {
    if (this.editedIndex > -1) {
      this.listPrimitive.update(this.editedIndex, this.editedItem)
    } else {
      this.listPrimitive.push(this.editedItem)
    }    this.close()
  }
}

Kode di atas mendefinisikan fungsi yang telah kita rujuk sejauh ini.

Fungsi initialise() membuat daftar primitif dengan nama sebagai vue-table.

Fungsi subscribeToUpdate() berisi kode untuk ditangani saat item ditambahkan, diperbarui, atau dihapus dari daftar primitif.

Fungsi deleteItem() menghapus item dari daftar primitif dengan memanggil listPrimitive.delete(index) dengan indeks item yang akan dihapus.

Fungsi save() memanggil listPrimitive.push(editedItem) untuk menambahkan item baru ke primitif daftar, dan memanggil listPrimitive.update(editedIndex, editedItem) untuk memperbarui catatan pada indeks tertentu.

Ini semua kode yang diperlukan untuk mencapai tujuan tabel data real-time yang dapat diedit Buka file index.html di browser Anda dan aplikasi siap digunakan!

Selesai!

Kami telah membuat tabel data real-time yang dapat diedit di Vue.js. Hamoni Sync memudahkan untuk menambahkan fungsionalitas waktu-nyata. Anda dapat menemukan kode sumbernya di GitHub.

---

Artikel Terkait Lainnya :

• Menambahkan SSR Ke Aplikasi Vue JS
• Memahami Mixins Pada Vue JS
• Menambahkan Sentry Ke Dalam Aplikasi Vue JS Kamu Dan Integrate Ke Dalam Gitllab CI / CD
• Membuat Aplikasi Desktop Dengan Vue JS Dan Electron
• Contoh Penerapan GraphQL Dengan Vue JS

Share this post