"SSH Online Mall Project Combat 09" Add and update the implementation of product category features

Source: Internet
Author: User

In the previous section we finished the function of querying and deleting products, this section we do the function of adding and updating products.

1. Add Product Categories
1.1 Adding a category UI design

Let's start with the idea: first, when the user clicks on "Add Item", we should pop up a "Add Item" UI window (note that this is not a jump to the new Jsp,easyui only one page), pop up this "Add Item" window, should lock its parent class of all the Windows (that is, click elsewhere invalid , can only operate Add Product window), and so the user filled out the information, in the new pop-up window click on the "Add", the request sent to Struts2, and then struts2 get the request you parameters, from the database to perform the add action, so that the background operation completed, while the front desk to refresh the current page, Re-display all items.

We look at Easyui's documentation and found that there are two ways to create a new window, either using the tag creation, or using JS to create, we use JS to create, but need a <div> box, as follows:


In addition, we create new windows that do not need to be minimized, maximized, but to lock the screen. So these attributes are set in the Div, here to pay attention to the function of the lock screen, because the <div> place different, locked screen range is different, we want to lock the full screen, so to put <div> Put in the aindex.jsp, should be generated in the aindex.jsp query.jsp content (including the Add button), query.jsp generated the content of save.jsp (that is, we want to display the UI of the added window), so after the pop-up window, we have to lock the scope of the aindex.jsp, So the <div> should be put into aindex.jsp, the concrete implementation is as follows:

Add a new <div> in the <body> of aindex.jsp

<div id= "Win" data-options= "Collapsible:false,minimizable:false,maximizable:false,modal:true" ></div>  
Then we refine the section of the query.jsp to add categories:

{iconcls: ' Icon-add ', Text: ' Add Category ', Handler:function () {parent.$ ("#win"). Window ({//Because <div> Placed in the aindex.jsp, so create a window here to first call Parenttitle: "Add Category", Width:350,height:150,content: ' <iframe src= ' Send_category_ Save.action "frameborder=" 0 "width=" 100% "height=" 100% "/> '});}}
As can be seen from the added category code above, after adding the UI, we introduce the contents of the save.jsp file in the Web-inf/category directory, and we then complete the save.jsp:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >1.2 Adding a logical implementation of a category

The front desk will send the data to the categoryaction in the Save method to execute, so we go to write action on the line, because the background only need to add categories to the database, do not need to return data to the foreground, so it is relatively simple, directly write action on the line:

@Controller ("Categoryaction") @Scope ("prototype") public class Categoryaction extends baseaction<category> {// Omit other code ... public void Save () {System.out.println (model); Categoryservice.save (model);}}
This data will be stored in the database, after the front desk to refresh the display, you can add the new product categories displayed, we look at




Add product category We're done with this one. Do the following to update the product category that piece.

2. Update Product Categories2.1 Updating the UI design for a category

The idea of updating the product category is the same as the above, the first is a popup UI window, and then the user fills in the data sent to the background, the background updates the database, the foreground and then refresh the display. We still use the method above to create a UI window. <div> box don't change anything, all we need to do is refine the code in the "Update category" section in query.jsp:

{iconcls: ' Icon-edit ', Text: ' Update category ', Handler:function () {///To determine if there is a row record selected, use Getselections to get all rows selected var rows = $ ("#dg"). DataGrid ("Getselections"); if (rows.length = = 0) {//pop-up hint info $.messager.show ({//syntax similar to static methods in Java, direct object call title: ' Error prompt ', msg : ' Select at least one record ', Timeout:2000,showtype: ' Slide ',});} else if (rows.length! = 1) {//pop-up hint info $.messager.show ({//syntax similar to static methods in Java, direct object calls title: ' Error prompt ', msg: ' Only one record can be updated at a time ', timeout : 2000,showtype: ' Slide ',});} Else{//1. Pop up the updated page parent.$ ("#win"). Window ({title: "Add Category", Width:350,height:250,content: ' <iframe src= ' Send_ Category_update.action "frameborder=" 0 "width=" 100% "height=" 100% "/> '});//2. }}}
We analyze the above JS code: First get the user tick to update the row, if not selected prompts the user at least to select a record to update, if more than one record is selected, you also have to prompt users to update only one record at a time. When these judgments are finished, and the user is guaranteed to tick a record, then we start to create a new UI window, and here is the same as above, introducing the content of the update.jsp page in the Web-inf/category directory, let's take a look at the update.jsp page content:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >The difference between updating and adding is that the data is echoed first, and then there is a drop-down list that shows the administrator data because the owning administrator also needs to be updated. We look at the above code, the first way to load the administrator data using the remote loading, first send a request to the background, the background accountaction query method after processing, the administrator data packaged in JSON format returned back, so that you can get the administrator data, to get, You can perform the echo of the data. Let's look at the backstage program:

2.2 The logical implementation of the update category

@Controller ("Baseaction") @Scope ("prototype") public class Baseaction<t> extends Actionsupport implements requestaware,sessionaware,applicationaware,modeldriven<t> {//used to have the data to be packaged in JSON format returned to the foreground, the following to implement the Get method protected list<t> jsonlist = null;//omit other methods ...} Accountaction@controller ("Accountaction") @Scope ("prototype") public class Accountaction extends baseaction<        account> {public String query () {jsonlist = Accountservice.query ();    return "Jsonlist"; }}
Next we configure the Struts.xml file:

<action name= "account_*" class= "accountaction" method= "{1}" ><result name= "jsonlist" type= "JSON" >< param name= "root" >jsonlist</param><param name= "excludeproperties" ><!--[0].pass, [1].pass- <!--regular expression shows a bug, I'm going to cut a picture below--></param></result></action>

After the completion of the Echo, is the update operation, of course, there are validation features, and add the same, the update operation will be sent to the Categoryaction Update method execution, relatively simple:

@Controller ("Categoryaction") @Scope ("prototype") public class Categoryaction extends baseaction<category> {// Omit other methods ... public void Update () {SYSTEM.OUT.PRINTLN (model); Categoryservice.update (model);}}

Here we have finished adding and updating the product categories.

(Note: To the end to provide the entire project source code download!) Welcome to our collection or attention)

Related reading: http://blog.csdn.net/column/details/str2hiberspring.html

___________________________________________________________________________________________________________ __________________________________________

-----willing to share and progress together!

-----More articles please see: http://blog.csdn.net/eson_15

"SSH Online Mall Project Combat 09" Add and update the implementation of product category features

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.