Dans la section précédente, nous avons rempli les fonctions de requête et de suppression des produits. Dans cette section, nous ferons les fonctions d'ajout et de mise à jour des produits.
1. Ajouter une catégorie de produit
1.1 Ajouter une conception de la catégorie d'interface utilisateur
Parlons d'abord de l'idée: d'abord, lorsque l'utilisateur clique sur «Ajouter un produit», nous devons faire apparaître une fenêtre d'interface utilisateur de «Ajouter un produit» (notez que cela ne saute pas au nouveau JSP, et EasyUi n'a qu'une seule page). Une fois que la fenêtre «Ajouter un produit» apparaît, toutes les fenêtres de sa classe parent doivent être verrouillées (c'est-à-dire que cliquer sur d'autres endroits n'est pas valide, et seule la fenêtre d'ajout de produits peut être actionnée). Une fois que l'utilisateur a rempli les informations, cliquez sur «Ajouter» sur la fenêtre nouvellement apparue, envoyez la demande à Struts2. Ensuite, Struts2 obtient les paramètres de demande et effectue l'action d'addition de la base de données. De cette façon, l'opération d'arrière-plan est terminée. Dans le même temps, la réception doit actualiser la page actuelle et rediger tous les produits.
Nous avons vérifié la documentation d'EasyUi et avons constaté qu'il existe deux façons de créer une nouvelle fenêtre. Créez-le avec des balises ou en utilisant JS. Nous utilisons JS pour le créer ici, mais nous avons besoin d'une boîte <v>, comme suit:
De plus, la nouvelle fenêtre que nous créons n'a pas besoin d'être minimisée ou maximisée, mais l'écran doit être verrouillé. Ces propriétés sont donc définies dans la div. Ce à quoi vous devez faire attention ici, c'est la fonction de verrouillage de l'écran. Parce que le <div> est placé différemment et que la plage d'écran verrouillée est également différente. Nous devons verrouiller le plein écran, nous devons donc mettre <v> dans Aindex.jsp. Le contenu de Query.jsp (y compris le bouton d'addition) doit être généré dans Aindex.jsp et le contenu de Save.jsp (c'est-à-dire l'interface utilisateur de la fenêtre d'addition que nous voulons afficher). Par conséquent, après la fenêtre pop-up, nous devons verrouiller la portée d'Aindex.jsp, donc <v> doit être placé dans Aindex.jsp, et l'implémentation spécifique est la suivante:
Ajoutez un nouveau <div> à Aindex.jsp <Body>
Copiez le code comme suit: <div id = "win" data-options = "effondrement: false, minimisable: false, maxizable: false, modal: true"> </ div>
Ensuite, nous perfectionnons la partie de l'ajout de catégories dans Query.jsp:
{iConcls: 'icon-Add', Texte: 'Ajouter une catégorie', Handler: function () {parent. $ ("# win"). Window ({// parce que <v> est placé dans Aindex.jsp, vous devez d'abord appeler le titre parent: "Ajouter la catégorie", width: 350, hauteur: 150, contenu: '<iframe src = "send_category_save.action" FrameSe = "0" / ^ / "send_category_save.action" }); }} Comme on peut le voir à partir du code ci-dessus pour l'ajout de catégories, nous présentons le contenu du fichier Save.jsp dans le répertoire Web-infr / catégorie. Ensuite, nous terminons Save.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! Doctype Html public "- // w3c // dtd html 4.01 transitional // en"> <html> marge: 5px; } </ style> <script type = "text / javascript"> $ (function () {$ ("input [name = type]"). validerbox ({// c'est la fonction de vérification de "Nom de catégorie". Si l'utilisateur le soumet sans le remplir Sur la liste déroulante de l'administrateur, Box.Comphobox ({// envoyez la demande à la méthode de requête en comptabilité pour le traitement. Ici, vous devez renvoyer les données traitées de ce côté pour l'afficher, donc l'arrière-plan doit emballer les données dans le format JSON et l'envoyer à URL: `` Account_Query.Action '', ValueField: `` Id '', TextField: 'Loggin', // L'administrateur est affiché sur la liste de la listes de la ligne. PannelHeight: 'Auto', // Hauteur adaptatif Panneauwidth: 120, // La liste des drop-down est une largeur: 120 composée de deux composants, // Le formulaire est modifié par défaut, car la fenêtre ne fait pas apparaître et que l'utilisateur s'affiche avant de remplir, c'est trop ugy, car la fenêtre qui apparaît et que l'utilisateur s'affiche avant de remplir, c'est trop ug $ ("# ff"). Form ("DisableValidation"); // Enregistrez l'événement du bouton. C'est-à-dire ce que fait l'utilisateur lorsque vous cliquez sur "Ajouter" $ ("# btn"). Cliquez sur (fonction () {// activer la vérification $ ("# ff"). Form ("activervalidation"); // si la vérification est réussie, soumettez les données si ($ ("# ff"). 'catégories_save.action', // Soumettez la demande à la méthode de sauvegarde dans catégorie la réception: fonction () {// après succès // si elle réussit, fermez la fenêtre actuelle. $ ("# win"). Gestion '] "). Get (0) .contentwindow. $ (" # Dg "). DataGrid (" recharger ");}});}}); }); </ script> </ head> <body> <form id = "ff" Method = "Post"> <div> <label for = "name"> Nom du produit: </ label> <input type = "text" name = "type" /> </ div> <v> <vabe name = "account.id" /> </ div> <div> <vabe> for = "hot"> hotspot: </ labe> oui <input type = "radio" name = "hot" value = "true" /> non <input type = "radio" name = "hot" value = "true" /> </ div> <a id = "btn" href = "#" data-options = "iconcls: 'icon-add'"> add </a> </div> </ form> </ody> </html> L'affichage de la réception et les demandes d'envoi ont été complétés et l'étape suivante consiste à faire le programme backend.
1.2 Implémentation logique de l'ajout de catégories <br /> La réception enverra des données à la méthode de sauvegarde dans CatégoryAction for Execution, nous avons donc juste besoin d'écrire de l'action, car l'arrière-plan doit seulement ajouter la catégorie dans la base de données et n'a pas besoin de retourner des données à la réception, donc il est relativement simple, il suffit d'écrire directement l'action:
@Controller ("categoryAction") @Scope ("Prototype") classe publique CatégorieAction étend BaseAction <catégories> {// omettre d'autres codes ... public void Save () {System.out.println (modèle); categoryService.save (modèle); }}De cette façon, les données seront stockées dans la base de données. Après cela, la réception actualisera l'affichage et affichera les catégories de produits nouvellement ajoutées. Jetons un coup d'œil.
Nous finirons d'ajouter des catégories de produits. Faisons la mise à jour de la catégorie de produit ci-dessous.
2. Mettre à jour la catégorie des produits
2.1 Catégorie de mise à jour Conception de l'interface utilisateur
L'idée de mettre à jour les catégories de produits est fondamentalement la même que celles ajoutées ci-dessus. Tout d'abord, une fenêtre d'interface utilisateur apparaît, puis l'utilisateur remplit les données et l'envoie à l'arrière-plan, met à jour la base de données en arrière-plan et rafraîchit l'affichage dans la réception. Nous utilisons toujours la méthode ci-dessus pour créer une fenêtre d'interface utilisateur. <div> La case n'a pas besoin d'être modifiée, tout ce que nous devons faire est d'améliorer le code de la partie "Catégorie de mise à jour" dans Query.jsp:
{iConcls: 'icon-edit', texte: 'Update Catégorie', Handler: function () {// juger s'il existe des enregistrements de ligne sélectionnés, utilisez des getSelections pour obtenir toutes les lignes sélectionnées var lignes = $ ("# dg"). dataGrid ("getSelections"); if (Rows.Length == 0) {// apparaît le message d'invite $ .messager.show ({// La syntaxe est similaire aux méthodes statiques dans Java. Titre des appels d'objets directs: `` Invite d'erreur '', msg: `` Au moins un enregistrement doit être sélectionné ', temporisation: 2000, showType:' Slide ',}); } else if (rows.length! = 1) {// Message d'invite populaire $ .messager.show ({// La syntaxe est similaire aux méthodes statiques en Java. Titre des appels d'objets directs: 'error invite', msg: 'un seul enregistrement peut être mis à jour à un moment' ', délai: 2000, showType:' Slide ',}); } else {// 1. La page mise à jour parent. $ ("# Win"). Window ({title: "Ajouter la catégorie", largeur: 350, hauteur: 250, contenu: '<iframe src = "send_category_update.action" frameborder = "0" />'}); // 2. }}}} Analysons le code JS ci-dessus: obtenez d'abord la ligne de mise à jour par l'utilisateur. S'il n'est pas sélectionné, l'utilisateur sera invité à sélectionner au moins un enregistrement à mettre à jour. Si plusieurs enregistrements sont sélectionnés, l'utilisateur sera également invité à mettre à jour un seul enregistrement à la fois. Une fois tous ces jugements terminés, l'utilisateur a vérifié un enregistrement, puis nous commençons à créer une nouvelle fenêtre d'interface utilisateur. Ici, comme ci-dessus, nous présentons le contenu de la page Update.jsp dans le répertoire Web-inff / catégorie. Jetons un coup d'œil au contenu de la page Update.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! Doctype Html public "- // w3c // dtd html 4.01 transitional // en"> <html> marge: 5px; } </ style> <script type = "text / javascript"> $ (function () {// objet datagrid var dg = parent. $ ("iframe [title = 'catégorie management']"). get (0) .contentwindow. $ ("# dg"); // télévisé à chargement $ ("# cc"). Combox. Renvoie les données traitées de ce côté pour l'afficher, de sorte que l'arrière-plan doit emballer les données au format JSON et l'envoyer à URL: 'account_query.action', ValueField: 'Id', TextField: 'Connex // Pour définir deux largeurs en même temps modifiables: false // La boîte déroulante ne permet pas d'édition}); $ ("# ff"). Form ('Load', {id: lignes [0] .id, type: lignes [0] .Type, Hot: Rows [0] .hot, 'account.id': lignes [0] .Account.id // easyUi ne prend pas en charge les opérations de point de compte. // Après avoir écho aux données, définissez la fonction de vérification $ ("input [name = type]"). Validatebox ({required: true, manquingMessage: 'Veuillez saisir le nom de catégorie'}); // désactiver la vérification $ ("# ff"). Form ("DisableValidation"); // Enregistrez l'événement du bouton $ ("# btn"). Cliquez sur (fonction () {// activer la vérification $ ("# ff"). Form ("activerValidation"); // si la vérification est réussie, soumettez les données si ($ ("# ff"). 'catégories_update.action', // lors de la soumission de la méthode de mise à jour de catégorie action: function () {// en cas de réussite, fermez la fenêtre actuelle et rafraîchissez la page. $ ("# win"). }); </ script> </ head> <body> <form id = "ff" metheth = "post"> <v> <label for = "name"> Nom de la catégorie: </ label> <entrée type = "text" name = "type" /> </ div> <v> <label for = "hot"> hotpot: </ label> oui <intrut type = "radio" name = "hot" value = " Value = "false" /> </ div> <div> <label for = "Account"> Administrator: </ Label> <! - List drop-down Nous utilisons le chargement à distance pour charger les données de l'administrateur -> <entrée id = "cc" name = "account.id" /> </div> <div> <a id = "btn" href = "#" data- options = "iconclcs: 'icon-eD" type = "Hidden" name = "id" /> </ div> `</ form> </ody> </html> La différence entre la mise à jour et l'ajout est que les données sont d'abord écho, puis il existe une liste déroulante pour afficher les données de l'administrateur, car l'administrateur auquel vous appartenez doit également mettre à jour. Examinons le code ci-dessus. Tout d'abord, utilisez la méthode de chargement à distance pour charger les données de l'administrateur. Tout d'abord, envoyez une demande au backend. Une fois la méthode de requête de la comptabilité de fond traitée, les données de l'administrateur sont emballées au format JSON et renvoyées, afin que les données administratrices puissent être obtenues. Après les avoir obtenus, les données peuvent être reproduites. Jetons un coup d'œil au programme d'arrière-plan:
2.2 Mettre à jour l'implémentation logique des catégories
@Controller ("Baseaction") @Scope ("Prototype") Classe publique BaseAction <T> étend ActionSupport implémente DequekAware, SessionAware, ApplicationAware, ModelDriven <T> {// Utiliser pour charger les données à emballer au format JSON pour revenir à l'avant-nombre. Ce qui suit consiste à implémenter la liste protégée par la méthode GET <T> JSONList = null; // omettez d'autres méthodes ...} // comptabilité @Controller ("AccountAction") @Scope ("Prototype") Classe publique AccountAction étend BaseAction <Count> {public String Query () {JSONList = comptacterservice.Query (); retourner "JSONList"; }} Ensuite, configurons le fichier strut.xml:
<action name = "account_ *" metheth = "{1}"> <résultat name = "jsonList" type = "json"> <param name = "root"> jsonlist </ param> <param name = "excludeproperties"> <! - [0] .pass, [1] .pass -> <! - L'expression régulière affiche un bug, je prends une image ci-dessous -> </ param> </ Résultat> Après avoir terminé l'Echo, l'opération de mise à jour est l'opération de mise à jour. Bien sûr, il existe également une fonction de vérification. Tout comme l'ajout, l'opération de mise à jour transmet la demande à la méthode de mise à jour de catégorieAction à exécuter, ce qui est relativement simple:
@Controller ("categoryAction") @Scope ("Prototype") La classe publique CatégorieAction étend BaseAction <catégories> {// omettre d'autres méthodes ... public void Update () {System.out.println (modèle); categoryService.update (modèle); }}À ce stade, nous avons terminé les opérations d'addition et de mise à jour des catégories de produits.
Adresse originale: http://blog.csdn.net/eson_15/article/details/51347734
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.