Bootstraptable dan knockoutjs bergabung untuk mencapai fungsi menambahkan, menghapus, memodifikasi dan memeriksa [2]

Dalam artikel sebelumnya, saya memperkenalkan kepada Anda kombinasi bootstraptable dan knockoutJs untuk mengimplementasikan penambahan, penghapusan, modifikasi, dan fungsi pencarian [1], dan memperkenalkan beberapa penggunaan dasar knockout.js. Selanjutnya, kami akan terus memperkenalkannya kepada Anda melalui artikel ini. Jika Anda berencana menggunakan KO untuk melakukan proyek, mari kita lihat!

Bootstrap adalah kerangka kerja front-end, hal yang baik untuk membebaskan pengembang web. Ini menunjukkan bahwa UI adalah sangat tinggi, atmosfer dan kelas atas. Secara teori, Anda tidak perlu menulis sederetan CSS. Cukup tambahkan atribut yang sesuai ke tag.

KnockoutJS adalah kerangka kerja MVVM yang diimplementasikan JavaScript. Sangat bagus. Misalnya, setelah menambahkan atau mengurangi item data daftar, tidak perlu menyegarkan seluruh fragmen kontrol atau menulis penambahan JS dan node penghapusan sendiri. Tentukan saja templat dan atribut yang memenuhi definisi sintaksnya. Sederhananya, kita hanya perlu memperhatikan akses ke data.

1. Pratinjau efeknya

Bahkan, itu tidak berpengaruh. Ini hanya tambahan sederhana, penghapusan, modifikasi, dan pencarian. Kuncinya masih ada pada kode. Menggunakan KO dapat menyimpan banyak operasi pengikatan data DOM antarmuka. Di bawah ini adalah kode JS untuk seluruh logika menambahkan, menghapus, memodifikasi dan mencari:

Efek halaman:

2. Contoh kode

Oke, mari kita sampai intinya! Blogger berencana untuk memperkenalkannya dalam dua bagian. Bagian pertama adalah bagian inisialisasi tabel, dan bagian kedua adalah penambahan operasi tombol, penghapusan dan bagian modifikasi.

1. Inisialisasi tabel

1.1. Persiapan

Pertama -tama lihat file JS dan CSS yang perlu direferensikan

 <tautan href = "~/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-table/bootstrap-table.min.min.css" rel = "styleSheet"/<skrip srck = "~ ~ ~ ~ ~ ~ ~ src = "~/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap Tabel/locale/bootstrap src = "~/skrip/knockout/knockout-3.4.0.min.js"> </script> <skrip src = "~/skrip/knockout/ekstensi/knockout.mapping-latest.js"> </script> <skrip src = "~/content/bootstrap-table/knockout.jootstraptable/skrip script =" ~/content/content/bootstrap src = "~/scripts/department.js"> </script>

Mereka semua adalah file CSS dan JS yang biasa digunakan. Kami terutama memiliki dua file JS khusus: knockout.bootstraptable.js dan department.js. Pada artikel sebelumnya, kami memperkenalkan bahwa menggunakan KO dapat menyesuaikan ikatan data kami. Demikian pula, untuk pengikatan tabel, kami juga mendefinisikan binding khusus, kode di dalam knockout.bootstraptable.js.

 // Tambahkan ko ko kustom ko.bindinghandlers.mybootstraptable = {init: function (elemen, valueAccessor, allbindingscacessor, viewModel) {// oparam di sini adalah oviewelvar oViewModel = valueAccessor (); var $ ele = $ (elemen). Metode Bootstraptable untuk ViewModel OviewModel.BootStraptable = function () {return $ ele.bootstraptable.apply ($ ele, argumen);}}, perbarui: fungsi (elemen, valueAccessor, allbindingsaccessor, viewModel) {}}; // valueAccessor ($)} {}} {} {} {}; ko.bootstraptableViewModel = fungsi (opsi) {var that = this; this.default = {pencarian: true, // apakah akan menampilkan pencarian tabel? MinimumCountColumns: 2, // Jumlah minimum kolom yang diizinkan clicktoselect: true, // di mana untuk mengaktifkan klik SELECT ROWTOGGLE: true,}; arrres;}; // refresh this.refresh = function () {that.bootStraptable ("Refresh");};};}) (jQuery);

Keraguan Kode: File JS ini terutama melakukan dua hal

1. Kustomisasi properti pengikat data myBootStraptable. Untuk metode pembaruan di ko.bindinghandlers.mybootstraptable, tidak perlu untuk mendefinisikannya.

2. Encapsulate Bootstraptable dengan menambahkan bootstraptableViewModel ke objek KO.

1.2. Mulailah mengikat tag HTML

 <tabel id = "tb_dept" data-bind = "mybootStraptable: $ root"> <tr> <th data-checkbox = "true"> </t> <th data-field = "name"> nama departemen </t> <-field = "level"> level departemen </th> <tH-field = "Deskripsi"> </th> level "> LETRETE" TH "TH" LETRETE = "> Deskripsi </th> </th> level </th> <tH" lEbke = le-field = "> Deskripsi </th> </th> DATEFIDE = TH" LETRETE "DATE-FIELD ="> DESKRIPSI </th> </th> Waktu </th> </tr> </deaad> </able>

Keraguan Kode: Tentukan tag tabel dan gunakan ikatan khusus ke mybootstraptable. Seperti yang disebutkan dalam artikel sebelumnya, $ root dapat dipahami sebagai arti inisialisasi. Untuk kesederhanaan, semua kolom ditulis langsung di <t th>.

1.3. Aktifkan Ikatan KO

Setelah halaman dimuat, mulailah mengikat KO:

 // inisialisasi $ (function () {// 1, init table tabelinit.init (); // 2, daftarkan add-on, penghapusan dan event modifikasi operasi.operateInit ();}); // inisialisasi tabel var tableinit = {init: function () {// tabel pengikat viewmodelthis.myviewModel () {// mengikat tabel viewmodelthis.myviewModel = {// tabel mengikat tabel viewmodelthis.myviewModel = {// binding tabel tabel binding viewmodis.myviewModel '/Department/getDepartment', // Metode permintaan url (*): 'get', // metode permintaan (*) toolbar: '#toolbar', // wadah mana yang digunakan untuk queryparams tombol pahat: function (param) {return {limit: param.limit, offset: param.Offset};},//pagination paraminy (param.limit, param.offset};},//pagination Paraminy (Param. Sidepagination: "Server", // Metode Pagination: Pagination Klien Klien, Server Server Pagination (*) Pagenumber: 1, // Inisialisasi halaman pertama yang dimuat, halaman pertama halaman: 10, // Jumlah baris perekam per halaman (*) Pagelist: [10, 25, 50], // Jumlah baris per halaman untuk dipilih: [10, 25, 50, 100], // Jumlah baris per halaman untuk dipilih: [10, 25, 50, 100], // Jumlah baris per halaman untuk dipilih: [10, 25, 50, 100], // Jumlah baris per halaman untuk dipilih: [10, 25, 50, 100], // Jumlah baris per halaman untuk dipilih: [10, 25, 50, 100], // Jumlah Halaman per halaman untuk dipilih: [10, 25, 50], // (*)}); ko.ApplyBindings (this.myviewModel, document.getElementById ("tb_dept"));}};

Keraguan Kode: Setelah halaman dimuat, hubungi objek BootstraptableViewModel yang dienkapsulasi di atas untuk menggabungkan parameter yang diteruskan, dan akhirnya mengaktifkan pengikatan, dan mengaktifkan ini. Kode debugging menunjukkan bahwa ketika ko.Applybinding (this.myviewModel, document.getElementById ("tb_dept")); dieksekusi; Ikatan khusus akan berlaku dan program akan memasukkan metode init dari objek KO.BINDINGHANDLERS.MybootTRaptable untuk menginisialisasi bootstraptable. Inilah titik yang harus dijelaskan:

 init: function (element, valueAccessor, allBindingsAccessor, viewModel) {//The oParam here is the bound viewmodelvar oViewModel = valueAccessor();var $ele = $(element).bootstrapTable(oViewModel.params);//Add bootstrapTable method to viewmodel oViewModel.bootstrapTable = function () {return $ ele.bootstraptable.apply ($ ele, argumen);}}

Dalam metode init di atas, melalui parameter kedua valueaccessor, kami mendapatkan ViewModel yang saat ini terikat, yang merupakan objek dari ini.myviewModel di atas. Blogger berpikir ini kondusif untuk pemahaman Anda tentang logika ikatan khusus. Pada dasarnya, ketika kami menjalankan kalimat ini var $ ele = $ (elemen) .BootStraptable (oviewModel.params);, inisialisasi tabel kami selesai. Blogger mendefinisikan koleksi untuk metode yang sesuai di latar belakang. Demi kelengkapan, saya akan mempostingnya di sini:

DepartmentController

2. Operasi tombol

Di atas adalah menggunakan pengikat data khusus kami melalui inisialisasi bootstraptable. Mari kita alami "Shuangweiwai" menggunakan atribut pemantauan menggunakan operasi tombol di bawah ini.

2.1. Lihat halaman

Pertama, tentukan tombol tambahan penghapusan kami di halaman tampilan

 <div id = "toolbar"> <tombol id = "btn_add" type = "tombol"> <span aria-hidden = "true"> </span> Tambahkan </button> <tombol id = "btn_edit" type = "Tombol"> <span aria-hidden = "true"> </span> Modifikasi </tombol> <button> </body = "btn aria hidden ="> </span> </tombol> </tombol> </button = "btn_"> </span> </tombol> </tombol </tombol = "btn aria-hidden ="> </span> </button> </tombol </tombol = "btn aria-hidden ="> </span> </button> </button> tombol </tombol> </span = "tombol =" tombol = "button> </tombol> </tombol> </tombol =" btn aria hidden = "> aria-hidden = "true"> </span> delete </button> </div>

Untuk kesederhanaan, blogger menggunakan kotak pop-up tersembunyi untuk berisi kotak teks yang baru ditambahkan dan diedit. Tentu saja, secara umum, Anda dapat menggunakan tampilan parsial di sini, dan mungkin ada edit.cshtml dalam proyek Anda, tetapi di sini blogger meletakkannya di satu halaman karena ini bukan fokus teks.

 <Div id = "mymodal" tabIndex = "-1" role = "dialog" aria-labeledby = "mymodallabel"> <div role = "document"> <vet> <Div> <tombol type = "tombol" data-dismiss = "modal" aria-label = "tutup"> <span aria-hidden = "true"> × </× × label = "tutup"> <span aria-hidden = "true"> × </× </× × </× × × × × × </hlden> id = "mymodallabel"> Operasi </h4> </div> <ver> <label for = "txt_departmentname"> nama departemen </label> <input type = "text" name = "txt_departmentname" data-bind = "name" name "id =" txt_departmentname "DATER-BIND =" NAME "NAME" "TXT_DEPARTENTENTHAME" name "name" txt_departmentname " untuk = "txt_departmentlevel"> Level departemen </label> <input type = "text" name = "txt_departmentLevel" data-bind = "value: level" id = "txt_departmentLevel" placeholder = "DepartmentLevel"> </div> <v> <label for = "txt_des"> DESCRIPLE "> DESCRIPE"> TEKS = "TEKS =" TEXT "TEXT"> TEKS = "Text"> Text "> data-bind = "value: des" id = "txt_des" placeholder = "description"> </div> </div> <v> <tombol type = "tombol" data-dismiss = "Modal"> <span aria-hidden = "true"> </span> tutup </aton> <tombol = "tombol" ID = "btn_submis" data-dismiss </spute> <tombol = "Tombol" ID = "btn_submis" data-dismiss "DATA-DISMISS =" Tombol "<tombol" ID = "BTN_SUBMIS" DATA "DATA" DATA "DATA" aria-hidden = "true"> </span> Simpan </button> </div> </div> </div>

2.2. Operasi Tombol Inisialisasi JS

 //Operation var operation = {//Initialize button event operateInit: function () {this.operateAdd();this.operateUpdate();this.operateDelete();this.DepartmentModel = {id: ko.observable(),Name: ko.observable(),Level: ko.observable(),Des: ko.observable(),CreateTime: ko.observable ()};}, // Tambahkan operasi: function () {$ ('#btn_add'). on ("klik", function () {$ ("#mymodal"). Modal (). On (On (ditampilkan ko.observable (), level: ko.observable (), des: ko.observable (), createTime: ko.observable ()}; ko.utils.extend (operate.departmentModel, oemptymodel); ko.applybindings (operate.departmentModel, oemptytytelel); ko.applybindings (operate -departmentmodel); document.geteLementById ("mymodal")); operate.operateSh ();}). on ('hidden.bs.modal', function () {ko.cleannode (document.geteLementById ("mymodal"));});});});});},//edit:});});});});},///edit: editor:});});}); {$ ('#btn_edit'). on ("click", function () {$ ("#mymodal"). Modal (). on ("ditampilkan Baris data ke viewmodelko.utils.extend (operate.departmentmodel, ko.mapping.fromjs (arrrrectedData [0])); ko.Applybindings (operate.departmentModel, document.getElementById ("mymodal"); operate. {// Bersihkan ikatan saat menutup kotak pop-up (ini jelas termasuk membersihkan ikatan dan membersihkan acara pendaftaran) ko.cleannode (document.getElementById ("mymodal"));});});});});});}, // hapus: () () () () () () () (function); oM function); {var arrrectedData = TableInit.myviewModel.getSelection (); $. AJAX ({url: "/department/delete", type: "Post", ContentType: 'Application/JSON', Data: json.stringify (arrrectedData), Success: function (data, status) {alert (status); // TableInit.myviewModel.refresh ();}});});});}, // Simpan data operatelve: function () {$ ('#btn_submit'). on ("click", function () {// fetch viewModel 'saat ini). Viewmodel ke data modelvar odatamodel = ko.toJs (oviewModel); var funcname = odatamodel.id?"update" :"add" ;$.ajax( {url: "/department/"+funcname, type: "post", data: odatamodel, function: function: suction: status) status) status), status), data), data) (function) (function) status) DATA (DATA), DATA), FUNCNAME, TYPE: "POST", DATA: ODATAMODEL, DATA: DATA: DATA: DATA: DATA: DATA) DATA (SUKSESS: DATA) (DATA) DATA (DATA)) {waspada (status); TableInit.myviewModel.refresh ();}});});});}, // Verifikasi data Operatecheck: function (arr) {if (arr.length <= 0) {ware ("Harap pilih setidaknya satu baris data"); return false;} if (arr. false;} return true;}}

Skeptisisme kode: Ceritakan tentang logika eksekusi di sini. Pertama, operator panggilan. OperateInit (); dalam metode $ (function () {}). Dalam metode operatorInit (), daftarkan acara klik tombol pada halaman, dan juga tentukan ini. DepartmentModel sebagai ViewModel yang baru diedit. ViewModel ini mendefinisikan atribut pemantauan yang sesuai dengan elemen halaman. Apakah Anda masih ingat beberapa ikatan data di kotak pop-up yang tersembunyi di atas? Ya, nilai nilai yang sesuai di dalamnya sesuai dengan atribut pemantauan di sini. Setelah mengatur ikatan, semua perubahan pemantauan dalam JS yang mengarah pada ini. DepartmentModel akan memicu nilai tag pengikat pada antarmuka untuk berubah. Sebaliknya, perubahan nilai nilai semua tag pada antarmuka pasti akan menyebabkan perubahan nilai atribut pemantauannya. Ini adalah apa yang disebut ikatan dua arah. Mari kita lihat eksekusi ikatan dua arah secara detail.

2.3. Operasi Baru

 $('#btn_add').on("click", function () {$("#myModal").modal().on("shown.bs.modal", function () {var oEmptyModel = {id: ko.observable(),Name: ko.observable(),Level: ko.observable(),Des: ko.observable(),CreateTime: ko.observable ()}; ko.utils.extend (operate.departmentmodel, oemptymodel); ko.Applybindings (operate.departmentModel, document.geteLementById ("mymodal")); operate.operateSh ();}). {ko.cleannode (document.getElementById ("mymodal"));});});

Ketika antarmuka kami memicu operasi baru, kotak modal tersembunyi yang disebutkan di atas akan muncul terlebih dahulu. Ketika kotak modal ditampilkan, pertama -tama tentukan viewmodel kosong, lalu hubungi ko.utils.extend (operate.departmentmodel, oemptymodel); Kalimat ini akan menimpa operasi global. DepartmentModel oleh ViewModel yang kosong. Fungsi metode ko.utils.extend () mirip dengan fungsi $ .extend () di jQuery. Kedua objek sebelumnya digabungkan berdasarkan objek selanjutnya, dan setelah penggabungan, ikatan diaktifkan menggunakan ViewModel baru. Setelah mengaktifkan ikatan, daftarkan acara klik tombol Simpan. Saat menambahkan ini, kotak modal muncul. Karena atribut pemantauan dalam viewmodel semuanya kosong, nilai elemen antarmuka yang sesuai juga akan dihapus, jadi kami melihat ini di penambahan baru:

Ketika kotak pop-up ditutup, kami menjalankan KO.CleanNode (Document.GetElementById ("MyModal"))); melalui acara tertutup. Kalimat ini sangat penting karena untuk DOM yang sama, KO hanya dapat terikat sekali. Jika Anda perlu mengikat lagi, Anda perlu menghapus ikatan terlebih dahulu. Selain itu, metode CleanNode () tidak hanya akan menghapus ikatan, tetapi juga menghapus peristiwa yang terdaftar di DOM. Anda perlu memperhatikan saat menggunakannya!

2.4. Operasi Pengeditan

 $ ('#btn_edit'). on ("click", function () {$ ("#mymodal"). Modal (). on ("ditampilkan Data dengan model data untuk viewmodelko.utils.extend (operate.departmentmodel, ko.mapping.fromjs (arrrectedData [0])); ko.Applybindings (operate.departmentModel, document.getElementById ("mymodal"); operate.operateSeAve, Onmodal (("mymodal"); Operate. {// Bersihkan ikatan saat menutup kotak pop-up (ini jelas termasuk membersihkan ikatan dan membersihkan acara pendaftaran) ko.cleannode (document.getElementById ("mymodal"));});});});

Ketika kami memicu operasi pengeditan, antarmuka masih muncul. Dalam acara pop-up dari kotak pop-up, kami mengambil baris yang saat ini dipilih dan kemudian periksa apakah baris dipilih. Yang terbaik adalah mengubah objek JSON biasa menjadi ViewModel dengan atribut pemantauan melalui kalimat ko.mapping.fromjs (arrrectectedData [0]). Seperti yang disebutkan dalam artikel sebelumnya, metode ini membutuhkan dukungan dari file js knockout.mapping-latest.js. Setelah konversi, ViewModel masih diperbarui melalui metode ko.utils.extend () dan kemudian mengaktifkan ikatan. Karena ViewModel diperbarui oleh data baris yang saat ini dipilih, hasilnya adalah:

2.5. Simpan operasi

Setelah menambahkan dan mengedit kotak pop-up, klik Simpan setelah memodifikasi informasi yang relevan, dan acara Simpan akan dipicu.

 $ ('#btn_submit'). on ("klik", function () {// Ambil viewmodelvar oViewModel = operating.departmentModel; // konversi viewModel ke datavar odatamodel = ko.toJs (oviewModel); var funcname = ko. odatamodel.id?"update":"add" ;$.ajax( /url: "/department/"+funcname, ketik: "post", data: odatamodel, sukses: fungsi (data, status) {status); TableInit.myviewModel.refresh ();}}};

Ketika acara Simpan dipicu, pertama -tama kami mendapatkan ViewModel terikat ke halaman, yaitu, Operating.DepartmentModel, dan kemudian menggunakan metode KO.TOJS () untuk mengonversi ViewModel dengan atribut pemantauan menjadi objek JSON dengan data murni. Metode ini built-in ke KO dan tidak memerlukan dukungan JS lainnya. Setelah mendapatkan objek JSON, kirim permintaan AJAX untuk menambah atau mengedit data. Ini mencerminkan ikatan dua arah dengan baik. Setelah nilai semua kotak teks pada perubahan antarmuka, perubahan operasi. DepartmentModel juga akan dipicu.

2.6. Hapus operasi

Tidak ada yang bisa dikatakan tentang operasi penghapusan dan tidak ada hubungannya dengan KO.

3. Ringkasan

Di atas memperkenalkan penggunaan bersama KO dan bootstraptable melalui penambahan sederhana, penghapusan, modifikasi dan operasi pencarian. KO dapat membebaskan Anda dari DOM dan fokus pada ViewModel. Melihat seluruh kode JS, Anda hampir tidak dapat melihat jQuery's Val (), Text () dan operasi lainnya untuk mendapatkan dan menetapkan nilai ke DOM antarmuka. Apakah itu terlihat bersih dan menyegarkan, dan kelas atas? Tentu saja, ini mungkin hanya beberapa penggunaan KO yang lebih mendasar. Bagaimanapun, blogger hanya belajar KO selama 3 hari, dan penggunaan yang lebih maju perlu dieksplorasi. Ketika Anda terbiasa dalam beberapa saat, Anda akan membagikan beberapa penggunaan lanjutan dengan semua orang. Jika Anda pikir artikel ini dapat membantu Anda memahami prinsip KO dan penggunaannya, Anda mungkin juga merekomendasikannya. Editor bersyukur di sini!

Di atas adalah seluruh konten dari kombinasi bootstraptable dan knockoutjs untuk mengimplementasikan penambahan, penghapusan, modifikasi, dan fungsi pencarian [2]. Saya harap ini akan membantu semua orang!