Saya adalah pengembang front-end pemula. Sekarang saya belajar dan berlatih di perusahaan IT Minsk. Mempelajari dasar-dasar web-ui terjadi menggunakan perpustakaan Webix JS sebagai contoh dan saya ingin berbagi pengalaman sederhana saya dan menyimpannya sebagai tutorial kecil untuk perpustakaan UI yang menarik ini.TANTANGAN KEEMPAT
Ketika bekerja dengan data, penting untuk dapat melakukan beberapa jenis operasi. Dalam pengembangan web, CRUD bertanggung jawab untuk ini - empat fungsi dasar. Pustaka Webix memiliki semua alat untuk mengimplementasikan CRUD. Dasar untuk memecahkan masalah baru akan berfungsi sebagai bahan dari publikasi sebelumnya: membuat antarmuka aplikasi , modul proyek , dan bekerja dengan formulir .Artikel ini akan membahas tugas-tugas berikut:- mengedit data tabel melalui formulir;
- Instal editor garis bawaan ;
- menambahkan data ke daftar dan bagan;
- hapus item;
Dalam dokumentasi Anda dapat menemukan Daftar , Treetable , widget Meja yang digunakan dalam artikel .Sumber ada di tautan .Aplikasi demo yang dihasilkan dapat ditemukan di sini .Langkah 1. Mengedit data melalui formulir
Pada langkah ini, saya akan bekerja dengan tab "Dashboard" di mana tabel dan formulir digambar. Kode tabel ada di file table.js, kode form ada di form.js.Dalam artikel " Bekerja dengan formulir ", entri baru ditambahkan menggunakan metode add () , yang dilengkapi dengan validasi formulir. Sekarang formulir akan digunakan untuk mengedit entri. TabelWidget Saya menambahkan acara di AfterSelect . Ketika acara ini dipicu, saya akan menerima data dari tabel dan mentransfernya ke bidang formulir.const table = {
view:"datatable",
id:"film_list",
scroll:"y",
select:true,
url:"data/data.js",
hover:"myhover",
columns:[
{ id:"rank", header:"", width:50, css:"rank"},
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Released", width:100},
{ id:"votes", header:"Votes", width:100},
{ id:"rating", header:"Rating", width:100}
],
on:{
onAfterSelect(id){
let values = $$("film_list").getItem(id);
$$("film_form").setValues(values)
}
}
}
Metode setValues () , dalam kode di atas, bertanggung jawab untuk meneruskan nilai yang diterima ke formulir.Saya menjalankan kode dan memeriksa hasilnya:
Segera setelah baris dalam tabel dipilih, datanya secara otomatis masuk ke formulir dan siap untuk bekerja.Sekarang saya mempersulit proses: catatan baru, seperti sebelumnya, akan ditambahkan ke tabel; jika data diambil dari tabel dan diedit, maka saya menyimpan perubahan ini.Saya akan menulis ulang fungsi saveItem dan menambahkan metode baru untuk itu:let saveItem = () => {
let form = $$( "film_form" );
let list = $$( "film_list" );
let item_data = $$("film_form").getValues();
if( form.isDirty() && form.validate() ){
if( item_data.id )
list.updateItem(item_data.id, item_data);
else
list.add( item_data );
}
}
Fungsi sekarang memiliki algoritma berikut:- pada awalnya, pemeriksaan dimulai untuk dua kondisi - apakah data formulir telah lulus validasi dan apakah formulir telah berubah. Perubahan dalam formulir dipantau oleh metode isDirty () ;
- setelah itu, kondisi "item_data.id" memungkinkan Anda untuk mendefinisikan catatan baru. String dikirim ke formulir dengan semua datanya, termasuk id, yang tidak ada bidang teks dalam formulir, tetapi diperlukan untuk data. Formulir menyimpan dan memungkinkan Anda membaca semua nilai yang dikirimkan, jadi kami menggunakan id untuk memverifikasi;
- setelah merekonsiliasi rekaman, catatan baru ditambahkan - dengan metode add () , atau elemen saat ini diperbarui dengan properti baru.
Untuk memperbarui data yang diedit, metode updateItem () digunakan . Metode ini mengambil dua parameter: id dari elemen yang dipilih dan satu set properti baru yang diambil dari formulir. Ketika fungsi dipanggil, data saat ini diganti dan ditambah dengan yang baru.Hasil:
Langkah 2. Menginstal editor bawaan
Pada langkah sebelumnya, saya mempertimbangkan opsi untuk mengedit data tabel menggunakan formulir. Tetapi formulir pada halaman tidak selalu diperlukan, jadi saya menerapkan metode pengeditan langsung di elemen. Metode ini berlaku dalam tabel dan komponen lain untuk bekerja dengan sejumlah besar data - misalnya, dalam daftar.Saya akan mulai dengan tampilan hierarki di tab " Produk ". Kode untuk tabel ada di file products_module.js.Widget Treetable memungkinkan Anda untuk mengedit konten tabel, tetapi fungsi ini dinonaktifkan secara default. Pengeditan dikonfigurasikan di dua tempat: di konfigurasi tabel editable:true, di konfigurasi, dan di konfigurasi setiap kolom. Speaker sudah diatur editor:”text”. Atribut “text” mengatur jenis editor. Untuk informasi lebih lanjut tentang jenis editor, lihatdokumentasi .const products = {
editable:true,
view:"treetable",
scrollX:false,
columns:[
{ id:"id", header:"", width:50 },
{ id:"title", header:"Title", fillspace:true,
template:"{common.treetable()} #title#", editor:"text" },
{ id:"price", header:"Price", width:200, editor:"text" }
],
select:"row",
url:"data/products.js",
rules:{
"price":webix.rules.isNotEmpty,
"title":webix.rules.isNotEmpty
}
}
Dalam kode, saya menambahkan editor untuk kolom Judul dan Harga. Dengan mengklik pada sel apa saja, editor akan terbuka di dalamnya - bidang teks:
Sekarang saya akan pergi ke tab " Pengguna ", dan saya akan menganalisis opsi untuk mengedit widget Daftar . Kode widget ada di file users_module.js.Pengeditan data tersedia secara default untuk widget TreeTable dan DataTable. Untuk menggunakan editor internal di widget lain, Anda dapat menggunakan modul EditAbility khusus . Saya menggunakan modul ini untuk mengedit data widget Daftar. Untuk melakukan ini, berdasarkan widget LIst, saya akan membuat komponen khusus menggunakan metode protoUI .Saya menuliskan nama - properti nama - widget masa depan dan mewarisi modul yang diperlukan untuk widget dasar.Daftar prototipe widget:webix.protoUI({
name:"editlist"
}, webix.EditAbility, webix.ui.list);
Setelah memanggil protoUI, saya mendapatkan komponen yang sudah jadi. Ini tertanam dalam widget dengan cara yang sama seperti yang lainnya - dengan pengaturan view:"editlist".view: "editlist",
editable:true,
editor:"text",
editValue:"name",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country# <span class='webix_icon wxi-close'></span> "
}
Karena ada banyak bidang dalam setiap catatan, dan nama dan negara segera diambil dalam lembar templat, - pengaturan ditambahkan dalam konfigurasi editorValue:”name”, yang menunjukkan bidang mana yang dapat diedit.Hasil:
Langkah 3. Menambahkan data ke daftar dan bagan
Bagian dari artikel ini menggunakan Daftar dan Bagan. Widget, kode yang terletak di file users_module.js dan ditampilkan di tab " Pengguna ".Widget Chart dan List menggunakan data yang sama - array JSON. Karena itu, ketika saya menerapkan kemampuan untuk menambahkan data, perlu bahwa mereka jatuh ke dalam kedua komponen.Untuk melakukan ini, dalam modul pengguna, saya akan menggambar tombol "Tambahkan orang baru".{
cols:[
{
view:"button",
id:"btn_add_person",
value:"Add new person",
width:150, css:"webix_primary",
click:addPerson
},
{}
]
}
Mengklik pada tombol memanggil fungsi addPerson menambahkan catatan baru ke daftar.Bagan ini menampilkan usia setiap catatan, sehingga angka acak akan dihasilkan untuk spread yang lebih besar.Berfungsi untuk menambahkan catatan baru:let addPerson = () => {
let obj = {
name:"Some name",
age:Math.floor(Math.random() * 80) + 10,
country:"Some country"
}
$$("user_list").add(obj);
$$("chart").add(obj);
};
Hasil:
Langkah 4. Menghapus Item
Menghapus elemen akan didemonstrasikan menggunakan widget Daftar sebagai tab Pengguna dan widget Tabel sebagai tab Dasbor .Untuk mulai dengan, di widget Tabel saya akan membuat kolom baru di mana saya akan menempatkan tag html dengan ikon.Untuk melacak klik pada ikon, Anda perlu menggunakan properti tabel onClick . Ini adalah objek yang menyimpan penangan yang terkait dengan elemen sesuai dengan salah satu kelas CSS mereka - saya memilikinya "delete_icon".Untuk memproses klik pada ikon, saya mengambil kelas delete_icon mereka dan menulisnya ke objek onClick sebagai kunci, nilai kunci ini akan menjadi fungsi - penangan kami. Di antara argumen muncul id dari catatan, jadi tidak ada yang mencegahnya dihapus menggunakan metode remove () .Kode widget tabel:const table = {
view:"datatable",
id:"film_list",
scroll:"y",
select:true,
url:"data/data.js",
hover:"myhover",
columns:[
{ id:"rank", header:"", width:50, css:"rank"},
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Released", width:100},
{ id:"votes", header:"Votes", width:100},
{ id:"rating", header:"Rating", width:100},
{ header:"", template:"<span class='webix_icon wxi-close delete_icon'></span>",
width:35}
],
onClick:{
delete_icon(e, id){
this.remove(id);
return false;
}
},
on:{
onAfterSelect(id){
let values = $$("film_list").getItem(id);
$$("film_form").setValues(values)
}
}
}
Algoritme penghapusan baris untuk widget Daftar sama dengan untuk widget Tabel:{
view: "editlist",
editable:true,
editor:"text",
editValue:"name",
id:"user_list",
select:true,
url:"data/users.js",
template:`#name# from #country#
<span class='webix_icon wxi-close delete_icon'></span> `,
onClick:{
delete_icon(e, id){
this.remove(id);
return false;
}
}
},
Hasil menghapus baris di tab Pengguna: Anda
dapat menemukan aplikasi yang sudah selesai di sini .Kesimpulan
Menerapkan CRUD menggunakan pustaka jix dari Webix dicapai dengan berbagai cara: Ada editor bawaan untuk mengubah data, dan API yang memungkinkan Anda melakukan hal yang sama, tetapi melalui formulir pihak ketiga. Menambahkan data memiliki berbagai skenario, dan dalam formulir ini Anda dapat mengimplementasikan seluruh rangkaian fungsi CRUD. Metode diimplementasikan dengan beberapa baris kode. Arsitektur perpustakaan memudahkan untuk menggabungkan berbagai fungsi satu sama lain.