Pada bagian sebelumnya, kami menyelesaikan fungsi permintaan dan menghapus produk. Di bagian ini, kami akan melakukan fungsi menambahkan dan memperbarui produk.
1. Tambahkan kategori produk
1.1 Tambahkan Kategori Desain UI
Mari kita bicara tentang ide ini terlebih dahulu: Pertama, ketika pengguna mengklik "Tambahkan Produk", kita harus memunculkan jendela UI "Tambahkan Produk" (perhatikan bahwa ini tidak melompat ke JSP baru, dan EyenUi hanya memiliki satu halaman). Setelah jendela "Tambah Produk" muncul, semua jendela kelas induknya harus dikunci (yaitu, mengklik tempat lain tidak valid, dan hanya jendela penambahan produk yang dapat dioperasikan). Setelah pengguna mengisi informasi, klik "Tambah" di jendela yang baru muncul, kirim permintaan ke Struts2. Kemudian Struts2 mendapatkan parameter permintaan dan melakukan tindakan penambahan dari database. Dengan cara ini, operasi latar belakang selesai. Pada saat yang sama, meja depan perlu menyegarkan halaman saat ini dan menampilkan kembali semua produk.
Kami memeriksa dokumentasi Easyui dan menemukan bahwa ada dua cara untuk membuat jendela baru. Baik membuatnya dengan tag atau menggunakan JS. Kami menggunakan JS untuk membuatnya di sini, tetapi kami memerlukan kotak <div>, sebagai berikut:
Selain itu, jendela baru yang kami buat tidak perlu diminimalkan atau dimaksimalkan, tetapi layar perlu dikunci. Jadi sifat -sifat ini diatur dalam div. Yang perlu Anda perhatikan di sini adalah fungsi mengunci layar. Karena <vi> ditempatkan secara berbeda dan rentang layar yang terkunci juga berbeda. Kita perlu mengunci layar penuh, jadi kita perlu memasukkan <viv> ke aindex.jsp. Konten query.jsp (termasuk tombol penambahan) harus dihasilkan di aIndex.jsp, dan konten save.jsp (itu adalah jendela tambahan UI yang ingin kami tampilkan). Oleh karena itu, setelah jendela pop-up, kita perlu mengunci ruang lingkup AIndex.jsp, jadi <div> harus ditempatkan di aindex.jsp, dan implementasi spesifik adalah sebagai berikut:
Tambahkan <verv> baru ke AIndex.jsp's <dod>
Salin kode sebagai berikut: <div id = "win" data-options = "collapse: false, minimizable: false, maximizable: false, modal: true"> </div>
Lalu kami menyempurnakan bagian dari menambahkan kategori di Query.jsp:
{iconCls: 'Icon-Add', Teks: 'Tambahkan Kategori', Handler: Function () {Parent. $ ("#Win"). Window ({// karena <ver> ditempatkan di AIndex.jsp, Anda harus menyebut judul Parent First: "Tambah Kategori", Lebar: 350, Tinggi: 150, konten: 'iframe scr = "" " }); }} Seperti yang dapat dilihat dari kode di atas untuk menambahkan kategori, kami memperkenalkan konten file save.jsp di direktori web-INF/kategori. Selanjutnya, kami menyelesaikan save.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <head> <%@ termasuk file = "/head.jsp. margin: 5px; } </style> <script type = "text/javaScript"> $ (function () {$ ("input [name = type]"). ValidateBox ({// Ini adalah fungsi verifikasi dari "nama kategori". Jika pengguna mengirimkannya tanpa mengisinya, akan ada prompt yang diminta: benar, hemat, 'silakan masukkan nama kategori' $ ("#cc") pada kotak drop-down administrator Box.ComBoBox ({// Kirim permintaan ke metode kueri di AccountAction untuk diproses. Di sini Anda perlu mengembalikan data yang diproses ke sisi ini untuk menampilkannya, sehingga latar belakang perlu mengemas data ke format JSON dan mengirimkannya ke URL: 'Account_Query.action', Valuefield: 'ID' Daftar drop-down. $ ("#ff"). Form ("Disablevalidation"); // Daftarkan acara tombol. Artinya, apa yang dilakukan pengguna saat mengklik "tambahkan" $ ("#btn"). Klik (function () {// aktifkan verifikasi $ ("#ff"). Formulir ("Enablevalidation"); // Jika verifikasi berhasil, kirimkan data jika $ ("#ff"). Formulir ("Validasi")) { / /Kirimkan DATA ("#ff"). {URL: 'Category_Save.Action', // Kirimkan permintaan ke metode simpan dalam kategori untuk menangani keberhasilan: function () {// Setelah sukses // jika berhasil, tutup Parent Window Manajemen '] "). Get (0) .contentWindow. $ ("#Dg "). Datagrid (" Reload ");}});}}); }); </script> </head> <body> <form id = "ff" Method = "Post"> <Div> <label for = "name"> nama produk: </label> <input type = "text" name = "type"/> </div> <ver> <label> administrator: </label <input id = "cc" name = "Account.id" id="cc" name="account.id"/> </div> <div> <label> for="hot">Hotspot:</label> Yes <input type="radio" name="hot" value="true" /> No <input type="radio" name="hot" value="true" /> </div> <div> <a id="btn" href="#" Data-options = "ICONCLS: 'ICON-Add'"> Tambahkan </a> </div> </form> </body> </html> Tampilan meja depan dan permintaan pengiriman telah selesai, dan langkah selanjutnya adalah melakukan program backend.
1.2 Implementasi logis dari penambahan kategori <br /> Meja depan akan mengirim data ke metode simpan dalam kategori untuk dieksekusi, jadi kita hanya perlu menulis tindakan, karena latar belakang hanya perlu menambahkan kategori ke dalam database dan tidak perlu mengembalikan data ke meja depan, jadi relatif sederhana, cukup tulis tindakan secara langsung:
@Controller ("CategoryAction") @scope ("ProtoType") Class Public CategoryAction memperluas basa <Pategory> {// menghilangkan kode lain ... public void save () {System.out.println (model); CategoryService.Save (model); }}Dengan cara ini, data akan disimpan dalam database. Setelah itu, meja depan akan menyegarkan tampilan dan menampilkan kategori produk yang baru ditambahkan. Mari kita lihat.
Kami akan selesai menambahkan kategori produk. Mari kita lakukan pembaruan kategori produk di bawah ini.
2. Perbarui Kategori Produk
2.1 Pembaruan Kategori UI Desain
Gagasan memperbarui kategori produk pada dasarnya sama dengan yang ditambahkan di atas. Pertama, jendela UI muncul, dan kemudian pengguna mengisi data dan mengirimkannya ke latar belakang, memperbarui database di latar belakang, dan menyegarkan tampilan di meja depan. Kami masih menggunakan metode di atas untuk membuat jendela UI. <div> Kotak tidak perlu diubah, yang perlu kita lakukan adalah meningkatkan kode untuk bagian "Kategori Pembaruan" di Query.jsp:
{iconcls: 'ikon-edit', teks: 'Kategori Perbarui', Handler: function () {// menilai apakah ada catatan baris yang dipilih, gunakan getSelection untuk mendapatkan semua baris yang dipilih var baris = $ ("#dg"). DataGrid ("getSelection"); if (rows.length == 0) {// Pop Up pesan prompt $ .messager.show ({// Sintaksnya mirip dengan metode statis di java. Judul panggilan objek langsung: 'kesalahan kesalahan', msg: 'setidaknya satu catatan harus dipilih', timeout: 2000, showType: 'slide',}); } else if (rows.length! = 1) {// Pesan prompt populer $ .messager.show ({// Sintaksnya mirip dengan metode statis di java. Judul objek langsung: 'kesalahan kesalahan', msg: 'Hanya satu catatan yang dapat diperbarui pada satu waktu', timeout: 2000, showType: 'slide',}); } else {// 1. Halaman induk yang diperbarui. $ ("#Win"). Window ({title: "Tambah kategori", lebar: 350, tinggi: 250, konten: '<iframe src = "send_category_update.action" frameborder = "0"/>'}); // 2. }}}} Mari kita analisis kode JS di atas: Pertama dapatkan baris untuk diperbarui oleh pengguna. Jika tidak dipilih, pengguna akan diminta untuk memilih setidaknya satu catatan untuk diperbarui. Jika lebih dari satu catatan dipilih, pengguna juga akan diminta untuk memperbarui hanya satu catatan pada satu waktu. Setelah semua penilaian ini selesai, pengguna telah memeriksa catatan, kemudian kami mulai membuat jendela UI baru. Di sini, seperti di atas, kami memperkenalkan konten halaman update.jsp di direktori web-INF/kategori. Mari kita lihat konten dari halaman pembaruan.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <head> <%@ termasuk file = "/head.jsp. margin: 5px; } </style> <script type = "text/javascript"> $ (function () {// objek datagrid var dg = parent. $ ("iframe [title = 'Category Management']"). Get (0) .contentWindow. to return the processed data to this side to display it, so the background needs to package the data into json format and send it to url:'account_query.action', valueField:'id', textField:'login', //Our drop-down list shows the administrator's login name panelHeight:'auto', //Adaptive height panelWidth:120, //The drop-down list is a width:120 composed of two Komponen, // Untuk mengatur dua lebar pada saat yang sama: False // kotak drop-down tidak mengizinkan pengeditan}); $ ("#ff"). Form ('Load', {ID: ROW [0] .id, ketik: baris [0] .type, hot: baris [0] .hot, 'Account.id': Baris [0] .Account.id // EasyUi tidak mendukung Operasi Poin Akun. // Setelah menggemakan data, atur fungsi verifikasi $ ("input [name = type]"). ValidateBox ({wajib: true, ristermessage: 'Harap masukkan nama kategori'}); // Nonaktifkan verifikasi $ ("#ff"). Formulir ("Disablevalidation"); // Daftarkan acara tombol $ ("#btn"). Klik (function () {// Aktifkan verifikasi $ ("#ff"). Form ("Enablevalidation"); // Jika verifikasi berhasil, kirimkan data if ("#ff"). " 'Category_Update.action', // Saat mengirimkan permintaan ke metode pembaruan kategori yang mengeksekusi Sukses: Function () {// Jika berhasil, tutup jendela saat ini dan refresh halaman induk. $ ("#Win"). }); </script> </head> <body> <form id="ff" method="post"> <div> <label for="name"> Category name:</label> <input type="text" name="type" /> </div> <div> <label for="hot"> Hotspot:</label> Yes <input type="radio" name="hot" value="true" /> No <input type="radio" name="hot" value="false" /> </div> <div> <label for="account">Administrator:</label> <!-- drop-down list We use remote loading to load administrator data --> <input id="cc" name="account.id" /> </div> <div> <a id="btn" href="#" data-options="iconCls:'icon-edit'">Update</a> <input type = "hidden" name = "id"/> </div> `</form> </body> </html> Perbedaan antara memperbarui dan penambahan adalah bahwa pertama-tama data digemakan, dan kemudian ada daftar drop-down untuk menampilkan data administrator, karena administrator yang Anda miliki juga perlu diperbarui. Mari kita lihat kode di atas. Pertama, gunakan metode pemuatan jarak jauh untuk memuat data administrator. Pertama, kirim permintaan ke backend. Setelah metode kueri akuntaksi latar belakang diproses, data administrator dikemas dalam format JSON dan dikembalikan, sehingga data administrator dapat diperoleh. Setelah mendapatkannya, data dapat digaungkan. Mari kita lihat program latar belakang:
2.2 Perbarui implementasi logis kategori
@Controller ("BaseAction") @Scope ("Prototipe") Basa Public Class <T> Memperluas ActionSupport mengimplementasikan permintaan, sessionAware, ApplicationAware, ModelDriven <T> {// Gunakan untuk memuat data yang akan dikemas ke dalam format JSON untuk kembali ke Forurround. Berikut ini adalah mengimplementasikan Daftar Lindung Metode GET <T> JSONLIST = NULL; // hilangkan metode lain ...} // AccountAction @Controller ("AccountAction") @Scope ("ProtoType") Class AccountAction Publik memperluas BaseAction <Account> {public String Query () {jsonList = AccountService.Query (); mengembalikan "JSONLIST"; }} Selanjutnya, mari kita konfigurasikan file struts.xml:
<action name = "account_*" method = "{1}"> <result name = "jsonlist" type = "json"> <param name = "root"> jsonlist </param> <param name = "excludeproPerties"> <!-[0] .pass, [1] .pass-<! <!-Ekspresi biasa,> <! Setelah menyelesaikan Echo, operasi pembaruan adalah operasi pembaruan. Tentu saja, ada juga fungsi verifikasi. Sama seperti menambahkan, operasi pembaruan meneruskan permintaan ke metode pembaruan kategori untuk dieksekusi, yang relatif sederhana:
@Controller ("CategoryAction") @scope ("ProtoType") Kategori Public ClassAction memperluas basa <Pategory> {// menghilangkan metode lain ... pembaruan public void () {System.out.println (model); CategoryService.update (model); }}Pada titik ini, kami telah menyelesaikan operasi penambahan dan memperbarui kategori produk.
Alamat asli: http://blog.csdn.net/eson_15/article/details/51347734
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.