ในส่วนก่อนหน้านี้เราเสร็จสิ้นฟังก์ชั่นการสอบถามและการลบผลิตภัณฑ์ ในส่วนนี้เราจะทำหน้าที่ในการเพิ่มและอัปเดตผลิตภัณฑ์
1. เพิ่มหมวดหมู่ผลิตภัณฑ์
1.1 เพิ่มการออกแบบหมวดหมู่ UI
มาพูดคุยเกี่ยวกับแนวคิดก่อน: ก่อนอื่นเมื่อผู้ใช้คลิกที่“ เพิ่มผลิตภัณฑ์” เราควรปรากฏหน้าต่าง UI ของ“ เพิ่มผลิตภัณฑ์” (โปรดทราบว่านี่ไม่ได้กระโดดไปยัง JSP ใหม่และ EasyUI มีเพียงหนึ่งหน้า) หลังจากหน้าต่าง“ เพิ่มผลิตภัณฑ์” ปรากฏขึ้นแล้วหน้าต่างทั้งหมดของคลาสแม่ควรถูกล็อค (นั่นคือการคลิกที่สถานที่อื่นไม่ถูกต้องและมีเพียงหน้าต่างของการเพิ่มผลิตภัณฑ์เท่านั้นที่สามารถใช้งานได้) หลังจากที่ผู้ใช้กรอกข้อมูลให้คลิก“ เพิ่ม” ในหน้าต่างที่พิมพ์ขึ้นใหม่ส่งคำขอไปยัง struts2 จากนั้น Struts2 จะได้รับพารามิเตอร์การร้องขอและดำเนินการเพิ่มการดำเนินการจากฐานข้อมูล ด้วยวิธีนี้การดำเนินการพื้นหลังจะเสร็จสมบูรณ์ ในเวลาเดียวกันแผนกต้อนรับจะต้องรีเฟรชหน้าปัจจุบันและแสดงผลิตภัณฑ์ทั้งหมดอีกครั้ง
เราตรวจสอบเอกสารของ Easyui และพบว่ามีสองวิธีในการสร้างหน้าต่างใหม่ ทั้งสร้างด้วยแท็กหรือใช้ JS เราใช้ JS เพื่อสร้างที่นี่ แต่เราต้องการกล่อง <div> ดังนี้:
นอกจากนี้หน้าต่างใหม่ที่เราสร้างไม่จำเป็นต้องย่อหรือขยายให้ใหญ่สุด แต่ต้องล็อคหน้าจอ ดังนั้นคุณสมบัติเหล่านี้จึงถูกตั้งค่าใน div สิ่งที่คุณต้องให้ความสนใจที่นี่คือฟังก์ชั่นของการล็อคหน้าจอ เนื่องจาก <div> ถูกวางแตกต่างกันและช่วงหน้าจอที่ล็อคก็แตกต่างกัน เราจำเป็นต้องล็อคหน้าจอเต็มรูปแบบดังนั้นเราจึงต้องใส่ <div> ลงใน aindex.jsp ควรสร้างเนื้อหาของ query.jsp (รวมถึงปุ่มเพิ่ม) ใน aindex.jsp และเนื้อหาของ save.jsp (นั่นคือหน้าต่างเพิ่มเติม UI ที่เราต้องการแสดง) ดังนั้นหลังจากหน้าต่างป๊อปอัพเราจำเป็นต้องล็อคขอบเขตของ aindex.jsp ดังนั้นควรวางไว้ใน aindex.jsp และการใช้งานเฉพาะมีดังนี้:
เพิ่ม <div> ใหม่ใน Aindex.jsp's <body>
คัดลอกรหัสดังต่อไปนี้: <div id = "win" data-options = "การล่มสลาย: เท็จ, minimizable: false, maximable: false, modal: true"> </div>
จากนั้นเราก็สมบูรณ์แบบส่วนหนึ่งของการเพิ่มหมวดหมู่ใน query.jsp:
{iconcls: 'icon-add', text: 'เพิ่มหมวดหมู่', handler: function () {parent. $ ("#win"). หน้าต่าง ({// เพราะ <div> ถูกวางไว้ใน aindex.jsp คุณต้องโทรหาชื่อหลัก: "เพิ่มหมวดหมู่", ความกว้าง: 350, ความสูง: 150, เนื้อหา: frameBorder = "0"/> '}); - ดังที่เห็นได้จากรหัสด้านบนสำหรับการเพิ่มหมวดหมู่เราแนะนำเนื้อหาของไฟล์ save.jsp ในไดเรกทอรี Web-Inf/หมวดหมู่ ต่อไปเราจะเสร็จสิ้น save.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> มาร์จิ้น: 5px; } </style> <script type = "text/javaScript"> $ (function () {$ ("input [name = type]"). VaridateBox ({// นี่คือฟังก์ชั่นการตรวจสอบของ "ชื่อหมวดหมู่" หากผู้ใช้ส่งโดยไม่ต้องเติมเต็ม ในรายการดรอปดาวน์ของผู้ดูแลระบบ Box.comboBox ({// ส่งคำขอไปยังวิธีการสอบถามในบัญชีสำหรับการประมวลผลที่นี่คุณต้องส่งคืนข้อมูลที่ประมวลผลไปยังด้านนี้เพื่อแสดงดังนั้นพื้นหลังจำเป็นต้องบรรจุข้อมูลในรูปแบบ JSON และส่งไปยัง URL: PanelHeight: 'Auto', // Adaptive Height Panelwidth: 120, // รายการดรอปดาวน์คือความกว้าง: 120 ประกอบด้วยสององค์ประกอบ // การแก้ไข: False // กล่องดรอปดาวน์ไม่อนุญาตให้แก้ไข}); $ ("#ff"). แบบฟอร์ม ("disablevalidation"); // ลงทะเบียนเหตุการณ์ปุ่ม นั่นคือสิ่งที่ผู้ใช้ทำเมื่อคลิก "เพิ่ม" $ ("#btn") คลิก (ฟังก์ชั่น () {// เปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("enablevalidation"); // หากการตรวจสอบประสบความสำเร็จให้ส่งข้อมูลถ้า ("#ff") 'category_save.action', // ส่งคำขอไปยังวิธีการบันทึกในหมวดหมู่เพื่อจัดการความสำเร็จ: function () {// หลังจากประสบความสำเร็จ // ถ้ามันประสบความสำเร็จให้ปิดพาเรนต์หน้าต่างปัจจุบัน $ ("win") หน้าต่าง ("ปิด"); การจัดการ '] "). รับ (0) .contentWindow. $ ("#dg "). dataGrid (" โหลด ");}});}}); - </script> </head> <body> <form id = "ff" method = "post"> <div> <label for = "name"> ชื่อผลิตภัณฑ์: </label> <อินพุต type = "text" name = "type"/> </div> <darmel name = "account.id"/> </div> <div> <dable> สำหรับ = "hot"> hotspot: </label> ใช่ <อินพุต type = "Radio" name = "hot" value = "true"/> no <อินพุต type = "Radio" name = "hot" value = "true"/> data-options = "iconcls: 'icon-Add'"> เพิ่ม </a> </div> </form> </body> </html> การแสดงผลแผนกต้อนรับส่วนหน้าและการส่งคำขอเสร็จสมบูรณ์และขั้นตอนต่อไปคือการทำโปรแกรมแบ็กเอนด์
1.2 การใช้งานเชิงตรรกะของการเพิ่มหมวดหมู่ <br /> แผนกต้อนรับส่วนหน้าจะส่งข้อมูลไปยังวิธีการบันทึกในหมวดหมู่สำหรับการดำเนินการดังนั้นเราเพียงแค่ต้องเขียนการกระทำเนื่องจากพื้นหลังจำเป็นต้องเพิ่มหมวดหมู่ลงในฐานข้อมูลและไม่จำเป็นต้องส่งคืนข้อมูลไปยังแผนกต้อนรับ
@Controller ("หมวดหมู่") @Scope ("ต้นแบบ") หมวดหมู่คลาสสาธารณะขยาย baseaction <หมวดหมู่> {// ละเว้นรหัสอื่น ... โมฆะสาธารณะบันทึก () {system.out.println (รุ่น); categoryservice.save (รุ่น); -ด้วยวิธีนี้ข้อมูลจะถูกเก็บไว้ในฐานข้อมูล หลังจากนั้นแผนกต้อนรับจะรีเฟรชการแสดงผลและแสดงหมวดหมู่ผลิตภัณฑ์ที่เพิ่มขึ้นใหม่ มาดูกันเถอะ
เราจะเพิ่มหมวดหมู่ผลิตภัณฑ์ให้เสร็จ มาอัปเดตหมวดหมู่ผลิตภัณฑ์ด้านล่างกันเถอะ
2. อัปเดตหมวดหมู่ผลิตภัณฑ์
2.1 อัปเดตหมวดหมู่การออกแบบ UI
แนวคิดของการอัปเดตหมวดหมู่ผลิตภัณฑ์นั้นเหมือนกับประเภทที่เพิ่มไว้ด้านบน ก่อนอื่นหน้าต่าง UI จะปรากฏขึ้นจากนั้นผู้ใช้จะกรอกข้อมูลและส่งไปยังพื้นหลังอัปเดตฐานข้อมูลในพื้นหลังและรีเฟรชการแสดงผลในแผนกต้อนรับส่วนหน้า เรายังคงใช้วิธีการข้างต้นเพื่อสร้างหน้าต่าง UI <div> กล่องไม่จำเป็นต้องเปลี่ยนแปลงสิ่งที่เราต้องทำคือปรับปรุงรหัสสำหรับส่วน "หมวดหมู่อัปเดต" ใน query.jsp:
{iconcls: 'icon-edit', ข้อความ: 'อัปเดตหมวดหมู่', handler: function () {// ตัดสินว่ามีการเลือกบันทึกแถวหรือไม่ใช้ getSelections เพื่อรับแถวที่เลือกทั้งหมด var rows = $ ("#dg"). dataGrid ("getSelections"); if (rows.length == 0) {// ป๊อปอัพข้อความพรอมต์ $ .messager.show ({// ไวยากรณ์คล้ายกับวิธีการคงที่ใน java การเรียกวัตถุโดยตรงชื่อเรื่อง: } else if (rows.length! = 1) {// ข้อความพรอมต์ยอดนิยม $ .messager.show ({// ไวยากรณ์คล้ายกับวิธีการคงที่ใน java การเรียกวัตถุโดยตรงชื่อเรื่อง: } else {// 1 PARY PARE ที่อัปเดต $ ("#win"). หน้าต่าง ({title: "เพิ่มหมวดหมู่", ความกว้าง: 350, ความสูง: 250, เนื้อหา: '<iframe src = "send_category_update.action" frameBorder = "0"/>'}); // 2. - มาวิเคราะห์รหัส JS ข้างต้น: ก่อนอื่นรับบรรทัดที่จะได้รับการอัปเดตโดยผู้ใช้ หากไม่ได้เลือกผู้ใช้จะได้รับแจ้งให้เลือกอย่างน้อยหนึ่งระเบียนเพื่ออัปเดต หากเลือกมากกว่าหนึ่งระเบียนผู้ใช้จะได้รับแจ้งให้อัปเดตครั้งละหนึ่งระเบียนเท่านั้น หลังจากการตัดสินทั้งหมดนี้เสร็จสมบูรณ์ผู้ใช้ได้ตรวจสอบบันทึกและเราเริ่มสร้างหน้าต่าง UI ใหม่ ที่นี่เราจะแนะนำเนื้อหาของหน้า Update.jsp ในไดเรกทอรี Web-Inf/Category ลองดูที่เนื้อหาของหน้า update.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> มาร์จิ้น: 5px; } </style> <script type = "text/javascript"> $ (function () {// dataGrid object var dg = parent. $ ("iframe [title = 'การจัดการหมวดหมู่']") รับ (0). contentWindow. $ ("#dg"); // ในการส่งคืนข้อมูลที่ประมวลผลไปยังด้านนี้เพื่อแสดงดังนั้นพื้นหลังจำเป็นต้องจัดทำแพ็คเกจข้อมูลลงในรูปแบบ JSON และส่งไปยัง URL: 'Account_Query.Action', ValueField: 'ID', ฟิลด์ข้อความ: 'เข้าสู่ระบบ', // รายการดรอปดาวน์ของเราแสดงชื่อการเข้าสู่ระบบของผู้ดูแลระบบ // ในการตั้งค่าสองความกว้างในเวลาเดียวกันการแก้ไข: false // กล่องดรอปดาวน์ไม่อนุญาตให้แก้ไข}); $ ("#ff"). แบบฟอร์ม ('โหลด', {id: แถว [0] .id, ประเภท: แถว [0] .Type, ร้อน: แถว [0]. hot, 'account.id': แถว [0] .Account.id // easyui ไม่สนับสนุนบัญชี // หลังจากสะท้อนข้อมูลให้ตั้งค่าฟังก์ชันการตรวจสอบ $ ("อินพุต [name = type]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนชื่อหมวดหมู่'}); // ปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("disablevalidation"); // ลงทะเบียนเหตุการณ์ของปุ่ม $ ("#btn") คลิก (function () {// เปิดใช้งานการตรวจสอบ $ ("#ff") ฟอร์ม ("enablevalidation"); // หากการตรวจสอบสำเร็จให้ส่งข้อมูลถ้า ("#ff") 'category_update.action', // เมื่อส่งคำขอไปยังวิธีการอัปเดตของหมวดหมู่การดำเนินการประสบความสำเร็จ: function () {// ถ้าประสบความสำเร็จให้ปิดหน้าต่างปัจจุบันและรีเฟรชหน้าหลัก $ ("#win"). - </script> </head> <body> <form id = "ff" method = "post"> <div> <label for "name"> ชื่อหมวดหมู่: </label> <อินพุต type = "text" name = "type"/> </div> <div> <label for = "hot"> hotspot: </label> value = "false"/> </div> <div> <label for = "บัญชี"> ผู้ดูแลระบบ: </label> <!-รายการดรอปดาวน์เราใช้การโหลดระยะไกลเพื่อโหลดข้อมูลผู้ดูแลระบบ-> <อินพุต id = "cc" name = "account.id"/> </div> type = "hidden" name = "id"/> </div> `</form> </body> </html> ความแตกต่างระหว่างการอัปเดตและการเพิ่มคือข้อมูลแรกที่สะท้อนออกมาจากนั้นมีรายการแบบเลื่อนลงเพื่อแสดงข้อมูลผู้ดูแลระบบเนื่องจากผู้ดูแลระบบที่คุณอยู่ในการอัปเดต มาดูรหัสด้านบนกันเถอะ ก่อนอื่นให้ใช้วิธีการโหลดระยะไกลเพื่อโหลดข้อมูลผู้ดูแลระบบ ก่อนอื่นส่งคำขอไปยังแบ็กเอนด์ หลังจากประมวลผลวิธีการสืบค้นของการทำบัญชีพื้นหลังแล้วข้อมูลผู้ดูแลระบบจะถูกบรรจุในรูปแบบ JSON และส่งคืนเพื่อให้สามารถรับข้อมูลผู้ดูแลระบบได้ หลังจากได้รับข้อมูลสามารถสะท้อนได้ มาดูโปรแกรมพื้นหลัง:
2.2 อัปเดตการใช้งานตามตรรกะของหมวดหมู่
@Controller ("baseaction") @Scope ("Prototype") Baseaction ระดับสาธารณะ <T> ขยายการดำเนินการ usponsterment requestaware, sessionaware, applicationaware, modeldriven <t> {// ใช้เพื่อโหลดข้อมูลที่จะบรรจุในรูปแบบ JSON เพื่อกลับไปที่เบื้องหน้า ต่อไปนี้คือการใช้รายการ Get Method Protected <t> jsonlist = null; // ละเว้นวิธีการอื่น ๆ ... } // accountaction @controller ("บัญชี") @scope ("prototype") การเรียนรู้ระดับสาธารณะขยาย baseaction <countion> {คิวรีสตริงสาธารณะ () {jsonlist = accountService.Query (); กลับ "jsonlist"; - ถัดไปกำหนดค่าไฟล์ struts.xml:
<action name = "account_*" method = "{1}"> <ชื่อผลลัพธ์ = "jsonlist" type = "json"> <param name = "root"> jsonlist </param> <param name = "excludeProperties"> <!-[0] หลังจากเสร็จสิ้น Echo การดำเนินการอัปเดตคือการดำเนินการอัปเดต แน่นอนว่ายังมีฟังก์ชั่นการตรวจสอบ เช่นเดียวกับการเพิ่มการดำเนินการอัปเดตจะส่งคำขอไปยังวิธีการอัปเดตของหมวดหมู่เพื่อดำเนินการซึ่งค่อนข้างง่าย:
@Controller ("หมวดหมู่") @Scope ("ต้นแบบ") หมวดหมู่คลาสสาธารณะขยาย baseaction <หมวดหมู่> {// ละเว้นวิธีการอื่น ... การอัปเดตโมฆะสาธารณะ () {system.out.println (รุ่น); CategoryService.update (รุ่น); -ณ จุดนี้เราได้เสร็จสิ้นการเพิ่มและอัปเดตการดำเนินงานของหมวดหมู่ผลิตภัณฑ์
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51347734
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น