Im vorherigen Abschnitt haben wir die Funktionen des Abfragungs- und Löschens von Produkten abgeschlossen. In diesem Abschnitt werden wir die Funktionen des Hinzufügens und Aktualisierens von Produkten ausführen.
1. Produktkategorie hinzufügen
1.1 Kategorie UI -Design hinzufügen
Lassen Sie uns zuerst über die Idee sprechen: Wenn der Benutzer auf "Produkt hinzufügen" klickt, sollten wir ein UI -Fenster mit "Produkt hinzufügen" aufnehmen (beachten Sie, dass dies nicht zum neuen JSP springt und Easyui nur eine Seite hat). Nachdem das Fenster „Produkt hinzufügen“ angezeigt wird, sollten alle Fenster seiner übergeordneten Klasse gesperrt werden (dh auf andere Stellen klicken, ist ungültig und nur das Hinzufügen von Produkten kann betrieben werden). Nachdem der Benutzer die Informationen ausgefüllt hat, klicken Sie im neu aufgetauten Fenster auf "Hinzufügen" und senden Sie die Anfrage an Struts2. Dann erhält Struts2 die Anforderungsparameter und führt die Additionsaktion aus der Datenbank aus. Auf diese Weise ist der Hintergrundvorgang abgeschlossen. Gleichzeitig muss die Rezeption die aktuelle Seite aktualisieren und alle Produkte neu speichern.
Wir haben die Dokumentation von Easyui überprüft und festgestellt, dass es zwei Möglichkeiten gibt, ein neues Fenster zu erstellen. Erstellen Sie es entweder mit Tags oder verwenden Sie JS. Wir verwenden JS, um es hier zu erstellen, aber wir brauchen wie folgt ein <Div> -Box:
Darüber hinaus muss das neue Fenster, das wir erstellen, nicht minimiert oder maximiert werden, aber der Bildschirm muss gesperrt werden. Diese Eigenschaften sind also in der DIV festgelegt. Was Sie hier achten müssen, ist die Funktion, den Bildschirm zu sperren. Da die <div> unterschiedlich platziert ist und der gesperrte Bildschirmbereich ebenfalls unterschiedlich ist. Wir müssen den ganzen Bildschirm sperren, also müssen wir <div> in aindex.jsp einsetzen. Der Inhalt von query.jsp (einschließlich der Zugabe -Schaltfläche) sollte in aindex.jsp generiert werden, und der Inhalt von Save.jsp (das ist die UI -Benutzerfenster, die wir anzeigen möchten). Daher müssen wir nach dem Popup-Fenster den Umfang von aindex.jsp sperren, sodass <div> in aindex.jsp platziert werden sollte, und die spezifische Implementierung lautet wie folgt:
Fügen Sie AIndex.jsps <body> eine neue <div> hinzu
Kopieren Sie den Code wie folgt: <div id = "win" data-options = "Collapse: Falsch, Minimierbar: Falsch, Maximierbar: Falsch, Modal: true"> </div>
Dann perfektionieren wir den Teil des Hinzufügens von Kategorien in query.jsp:
{iconcls: 'icon-add', text: 'kategorie hinzufügen', Handler: function () {parent. Framborder = "0"/> '}); }} Wie aus dem obigen Code zum Hinzufügen von Kategorien ersichtlich ist, stellen wir den Inhalt der Datei Save.jsp im Verzeichnis web-inf/kategorie ein. Als nächstes vervollständigen wir Save.jsp:
<%@ page Language = "java" import = "java.util. Rand: 5px; } </style> <script type = "text/javaScript"> $ (function () {$ ("input [name = type]"). ValidateBox ({// Dies ist die Überprüfungsfunktion "Kategorienname". Wenn der Benutzer sie einreicht, ohne sie auszufüllen, wird eine Aufforderung erforderlich: true, fehlende Message: Um die kategory name '// // // // // // // // // // // ///////////////// /////////// ///////////// //////////// // // /////////////////////////.' // // // // //. $ ("#cc") Auf dem Dropdown-Listenfeld des Administrators. Liste. $ ("#ff"). Form ("DisableValidation"); // Registrieren Sie das Schaltflächenereignis. Das heißt, was der Benutzer beim Klicken auf "add" $ ("#btn"). Click (function () {// Verifizierung $ ("#ff"). URL: 'Category_Save.Action', // die Anforderung in die Save-Methode in der Kategorie einreichen, um den Erfolg zu verarbeiten: Funktion () {// After Success // Wenn es erfolgreich ist, schließen Sie den aktuellen Fenster übergeordnet. $ ("#Win") Management '] "). Get (0) .ContentWindow. }); </script> </head> <body> <form id="ff" method="post"> <div> <label for="name">Product name:</label> <input type="text" name="type" /> </div> <div> <label>Administrator: </label> <input id="cc" name="account.id"/> </div> <div> <label>Administrator: </label> <input id="cc" name = "account.id"/> </div> <div> <label> für = "hot"> hotspot: </label> yes <Eingabe type = "radio" name = "hot" value = "true"/> no <input type = "radio" name = "Hot" value = "true"/> </> <div> <a id = "btn" href = "#"#"#"#"#"#"#"#"#"#" data-options = "iconcls: 'icon-add'"> add </a> </div> </form> </body> </html> Die Anfragen an der Rezeption und das Senden von Anfragen wurden abgeschlossen, und der nächste Schritt besteht darin, das Backend -Programm durchzuführen.
1.2 Logische Implementierung des Hinzufügens von Kategorien <BR /> Die Rezeption sendet Daten in die Kategorie zur Ausführung an die Speichermethode. Daher müssen wir nur Aktionen schreiben, da der Hintergrund die Kategorie nur in die Datenbank hinzufügen muss und keine Daten an die Rezeption zurückgeben muss, sodass sie relativ einfach ist, einfach die Aktion direkt schreiben: direkt:
@Controller ("Kategorie") @Scope ("Prototyp") öffentliche Klassenkategorie erweitert Baseacction <category> {// andere Codes weglassen ... public void Save () {System.out.println (Modell); categoryService.save (Modell); }}Auf diese Weise werden die Daten in der Datenbank gespeichert. Danach aktualisiert die Rezeption das Display und zeigt die neu hinzugefügten Produktkategorien an. Schauen wir uns an.
Wir werden die Produktkategorien addieren. Lassen Sie uns die aktualisierte Produktkategorie unten durchführen.
2. Aktualisieren Sie die Produktkategorie
2.1 Kategorie UI -Design aktualisieren
Die Idee, Produktkategorien zu aktualisieren, ist im Grunde die gleichen wie die oben hinzugefügten. Zuerst wird ein UI -Fenster angezeigt, und dann füllt der Benutzer die Daten aus und sendet sie an den Hintergrund, aktualisiert die Datenbank im Hintergrund und aktualisiert die Anzeige in der Rezeption. Wir verwenden immer noch die obige Methode, um ein UI -Fenster zu erstellen. <Div> Das Box muss nicht geändert werden. Wir müssen lediglich den Code für das Teil "Kategorie aktualisieren" in query.jsp verbessern:
{iconcls: 'icon-edit', text: 'kategorie aktualisieren', Handler: function () {// beurteilen, ob es ausgewählte Zeilendatensätze gibt, verwenden Sie GetSelections, um alle ausgewählten Zeilen zu erhalten var rows = $ ("#DG"). DataGrid ("getSelections"); if (rows.length == 0) {// Die Eingabeaufforderung meldung $ .messager.show ({// Die Syntax ist ähnlich wie bei statischen Methoden in Java. Direct Object Calls Titel: 'Fehleraufforderung', msg: 'mindestens ein Datensatz muss ausgewählt werden', Timeout: 2000, ShowType: 'Side',}); } else if (rows.length! } else {// 1. Die aktualisierte Seite übergeordnete Seite. // 2. }}}} Lassen Sie uns den oben genannten JS -Code analysieren: Lassen Sie zuerst die Zeile vom Benutzer aktualisieren. Wenn es nicht ausgewählt ist, wird der Benutzer aufgefordert, mindestens einen Datensatz zum Update auszuwählen. Wenn mehr als ein Datensatz ausgewählt ist, wird der Benutzer auch aufgefordert, jeweils nur einen Datensatz zu aktualisieren. Nachdem all diese Urteile abgeschlossen sind, hat der Benutzer einen Datensatz überprüft, und dann beginnen wir, ein neues UI -Fenster zu erstellen. Hier führen wir wie oben den Inhalt der Seite "Update.jsp in das Web-INF/Category-Verzeichnis" vor. Schauen wir uns den Inhalt der Seite "Update.jsp" an:
<%@ page Language = "java" import = "java.util. Rand: 5px; } </style> <script type = "text/javaScript"> $ (function () {// datagrid -Objekt var dg = parent. Geben Sie die verarbeiteten Daten auf diese Seite zurück, um sie anzuzeigen. Der Hintergrund muss die Daten in das JSON-Format verpacken und an URL: 'Account_query.Action', ValueField: 'ID', TextField: 'Login', // Unsere Dropdown-Liste zeigt die Login-Name des Administrators an. Breite gleichzeitig bearbeitet: Falsch // Die Dropdown-Box ist nicht zugelassen. ID: Zeilen [0] .ID, Typ: Zeilen [0] .Typ, heiß: Zeilen [0] .Hot, 'account.id': Zeilen [0] .account.id // Easyui unterstützt das Konto nicht. // Setzen Sie nach dem Echo der Daten die Überprüfungsfunktion $ ("input [name = type]"). ValidateBox ({erforderlich: true, fehlendeMessage: 'Bitte geben Sie den Kategorie -Namen'}); // Überprüfung $ deaktivieren ("#ff"). Formular ("DisableValidation"); // Registrieren Sie das Ereignis der Schaltfläche $ ("#Btn"). Click (function () {// Verifizierung $ ("#ff"). Formular ("EnableValidation"); // Wenn die Verifizierung erfolgreich ist, senden Sie die Daten, wenn ($ ("#ff"). 'category_update.action', // beim Senden der Anforderung an die Aktualisierungsmethode der Kategorie erfolgreich: Funktion () {//, wenn erfolgreich das aktuelle Fenster ist und die Seite "$" ("#win"). }); </script> </head> <body> <form id = "ff" methode = "post"> <div> <label für = "name"> Kategorienname: </label> <Eingabe type = "text" name = "type"/> </div> <div> <div> <label für = "hot"> hotspot: </label> Eingabe type = "fobry" name "hot" type "type". value = "false"/> </div> <div> <label for = "account"> Administrator: </label> <!-Dropdown-Liste Wir verwenden Remote-Laden, um Administratordaten zu laden-> <input id = "cc" name = "account.id"/> </div> <div> <a id = "btn" href = "#"#"Data-Options =" "Data-Options =" "Data-"-"Data-Options =" "Data-Options =" ". Typ = "Hidden" name = "id"/> </div> `</form> </body> </html> Der Unterschied zwischen Aktualisierung und Hinzufügen besteht darin, dass zuerst die Daten wiederholt werden, und dann gibt es eine Dropdown-Liste, in der die Administratordaten angezeigt werden, da der Administrator, zu dem Sie angehören, auch aktualisiert werden muss. Schauen wir uns den obigen Code an. Verwenden Sie zunächst die Remote -Lademethode, um die Administratordaten zu laden. Senden Sie zunächst eine Anfrage an das Backend. Nachdem die Abfragemethode der Hintergrundkontoaktion verarbeitet wurde, werden die Administratordaten in das JSON -Format verpackt und zurückgegeben, sodass die Administratordaten erhalten werden können. Nach dem Erhalt können die Daten wiederholt werden. Schauen wir uns das Hintergrundprogramm an:
2.2 Aktualisieren Sie die logische Implementierung von Kategorien
@Controller ("Baseaction") @Scope ("Prototyp") Basisanlagen der öffentlichen Klasse <T> Erweitert die ActionVectupport -Implements RequestAwe, SessionAWare, ApplicationAware, modelldelen <t> {// Verwenden Sie, um die Daten zu laden, die in das JSON -Format verpackt werden sollen, um zum Vordergrund zurückzukehren. Im Folgenden ist die Implementierung der Get -Method -Protected List <T> jsonList = null implementiert. // andere Methoden weglassen ...} // AccountAction @Controller ("AccountAction") @Scope ("Prototyp") öffentliche Klasse AccountAction erweitert Baseaction <Conto> {public String query () {jsonlist = AccountService.query (); zurück "jsonList"; }} Konfigurieren wir als Nächstes die Datei Struts.xml:
<action name = "account_*" method = "{1}"> <result name = "jsonlist" type = "json"> <param name = "root"> jsonlist </param> <param name = "exkludeProperties"> <!-[0] .pass, [1] .pass-> <! Nach Abschluss des Echos ist die Aktualisierungsoperation die Aktualisierungsoperation. Natürlich gibt es auch eine Überprüfungsfunktion. Genau wie bei der Addition gibt die Aktualisierungsoperation die Anforderung an die von der KategoryAktion auszuführende Aktualisierungsmethode über, was relativ einfach ist:
@Controller ("Kategorie") @Scope ("Prototyp") öffentliche Klassenkategorie erweitert Baseacction <category> {// andere Methoden weglassen ... public void update () {System.out.println (Modell); categoryService.update (Modell); }}Zu diesem Zeitpunkt haben wir die Additions- und Aktualisierungsvorgänge von Produktkategorien abgeschlossen.
Originaladresse: http://blog.csdn.net/eson_15/article/details/51347734
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.