In the previous section, we completed the functions of querying and deleting products. In this section, we will do the functions of adding and updating products.
1. Add product category
1.1 Add category UI design
Let’s talk about the idea first: First, when the user clicks on “Add Product”, we should pop up a UI window of “Add Product” (note that this is not jumping to the new jsp, and EasyUI has only one page). After the “Add Product” window pops up, all windows of its parent class should be locked (that is, clicking on other places is invalid, and only the window of adding products can be operated). After the user fills in the information, click “Add” on the newly popped up window, send the request to struts2. Then struts2 gets the request parameters and performs the addition action from the database. In this way, the background operation is completed. At the same time, the front desk needs to refresh the current page and redisplay all products.
We checked EasyUI's documentation and found that there are two ways to create a new window. Either create it with tags or using js. We use js to create it here, but we need a <div> box, as follows:
In addition, the new window we create does not need to be minimized or maximized, but the screen needs to be locked. So these properties are set in the div. What you need to pay attention to here is the function of locking the screen. Because the <div> is placed differently and the locked screen range is also different. We need to lock the full screen, so we need to put <div> into aindex.jsp. The content of query.jsp (including the addition button) should be generated in aindex.jsp, and the content of save.jsp (that is the addition window UI we want to display). Therefore, after the pop-up window, we need to lock the scope of aindex.jsp, so <div> should be placed in aindex.jsp, and the specific implementation is as follows:
Add a new <div> to aindex.jsp's <body>
Copy the code as follows: <div id="win" data-options="collapse:false,minimizable:false,maximizable:false,modal:true"></div>
Then we perfect the part of adding categories in query.jsp:
{ iconCls: 'icon-add', text:'Add category', handler: function(){ parent.$("#win").window({ //Because <div> is placed in aindex.jsp, you must first call parent title:"Add category", width:350, height:150, content:'<iframe src="send_category_save.action" frameborder="0"/>' }); } } As can be seen from the above code for adding categories, we introduce the contents of the save.jsp file in the WEB-INF/category directory. Next, we complete save.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:5px; } </style> <script type="text/javascript"> $(function(){ $("input[name=type]").validatebox({ //This is the verification function of "category name". If the user submits it without filling it out, there will be a prompt required:true, missingMessage:'Please enter the category name' //The content of the prompt}); //Remotely load $("#cc") on the administrator's drop-down list box.combobox({ //Send the request to the query method in accountAction for processing. Here you need 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', //The administrator's login name is displayed in our drop-down list. panelHeight:'auto', //Adaptive height panelWidth:120,//The drop-down list is a width:120 composed of two components, //The editable:false //The drop-down box does not allow editing}); //The form pops up by default, because the window that just pops up and the user displays it before filling in, it is too ugly $("#ff").form("disableValidation"); //Register the button event. That is, what the user does when clicking "Add" $("#btn").click(function(){ //Enable verification $("#ff").form("enableValidation"); //If the verification is successful, submit the data if($("#ff").form("validate")) { //Calling the submit method to submit data $("#ff").form('submit', { url: 'category_save.action', //Submit the request to the save method in categoryAction to handle success: function(){ //After success//If it is successful, close the current window parent.$("#win").window("close"); //Refresh the page, and the just added will be displayed. //Get aindex-->iframe-->datagrid parent.$("iframe[title='Category Management']").get(0).contentWindow.$("#dg").datagrid("reload"); } }); } }); }); </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> 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'">Add</a> </div> </form> </body> </html> The front desk display and sending requests have been completed, and the next step is to do the backend program.
1.2 Logical implementation of adding categories <br />The front desk will send data to the save method in categoryAction for execution, so we just need to write Action, because the background only needs to add the category into the database and does not need to return data to the front desk, so it is relatively simple, just write the action directly:
@Controller("categoryAction") @Scope("prototype") public class CategoryAction extends BaseAction<Category> { //Omit other codes... public void save() { System.out.println(model); categoryService.save(model); } }In this way, the data will be stored in the database. After that, the front desk will refresh the display and display the newly added product categories. Let's take a look.
We'll finish adding product categories. Let’s do the update of the product category below.
2. Update product category
2.1 Update category UI design
The idea of updating product categories is basically the same as the ones added above. First, a UI window pops up, and then the user fills in the data and sends it to the background, updates the database in the background, and refreshes the display in the front desk. We still use the above method to create a UI window. <div>The box doesn't need to be changed, all we need to do is to improve the code for the "Update Category" part in query.jsp:
{ iconCls: 'icon-edit', text:'Update category', handler: function(){ //Judge whether there are selected row records, use getSelections to get all selected rows var rows = $("#dg").datagrid("getSelections"); if(rows.length == 0) { //Pop up the prompt message $.messager.show({ //The syntax is similar to static methods in java. Direct object calls title:'Error prompt', msg:'at least one record must be selected', timeout:2000, showType:'slide', }); }else if(rows.length != 1) { //Popular prompt message $.messager.show({ //The syntax is 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. The updated page parent.$("#win").window({ title:"Add category", width:350, height:250, content:'<iframe src="send_category_update.action" frameborder="0"/>' }); //2. } } } } Let’s analyze the above js code: first get the line to be updated by the user. If it is not selected, the user will be prompted to select at least one record to update. If more than one record is selected, the user will also be prompted to update only one record at a time. After all these judgments are completed, the user has checked a record, then we start to create a new UI window. Here, as above, we introduce the content of the update.jsp page in the WEB-INF/category directory. Let's take a look at the content of the update.jsp page:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:5px; } </style> <script type="text/javascript"> $(function(){ //datagrid object var dg = parent.$("iframe[title='Category Management']").get(0).contentWindow.$("#dg"); //Remotely load $("#cc").combobox({ //Send the request to the query method in accountAction for processing. Here you need 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 components, //To set two widths at the same time editable:false //The drop-down box does not allow editing}); // When completing the data echo, the user must first select the row to be updated. First, we have to get which row var rows = dg.datagrid("getSelections"); //Load the corresponding data field of the row you get into the form to echo $("#ff").form('load',{ id:rows[0].id, type:rows[0].type, hot:rows[0].hot, 'account.id':rows[0].account.id //EasyUI does not support account.id point operations, so you need to add quotation marks}); //After echoing the data, set the verification function $("input[name=type]").validatebox({ required:true, missingMessage:'Please enter the category name' }); //Disable verification $("#ff").form("disableValidation"); //Register the button's event $("#btn").click(function(){ //Enable verification $("#ff").form("enableValidation"); //If the verification is successful, submit the data if($("#ff").form("validate")) { //Calling the submit method to submit the data $("#ff").form('submit', { url: 'category_update.action', //When submitting the request to the update method of categoryAction executes success: function(){ //If successful, close the current window and refresh the page parent.$("#win").window("close"); dg.datagrid("reload"); } }); } }); }); </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> The difference between updating and adding is that first the data is echoed, and then there is a drop-down list to display the administrator data, because the administrator you belong to also needs to update. Let’s look at the above code. First, use the remote loading method to load the administrator data. First, send a request to the backend. After the query method of the background accountAction is processed, the administrator data is packaged into json format and returned, so that the administrator data can be obtained. After obtaining it, the data can be echoed. Let's take a look at the background program:
2.2 Update the logical implementation of categories
@Controller("baseAction") @Scope("prototype") public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> { //Use to load the data to be packaged into json format to return to the foreground. The following is 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, let's configure the struts.xml file:
<action name="account_*" method="{1}"> <result name="jsonList" type="json"> <param name="root">jsonList</param> <param name="excludeProperties"> <!-- [0].pass, [1].pass --> <!-- The regular expression shows a bug, I'll take a picture below --> </param> </result> </action> After completing the echo, the update operation is the update operation. Of course, there is also a verification function. Just like adding, the update operation passes the request to the update method of categoryAction to execute, which is 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); } }At this point, we have completed the addition and update operations of product categories.
Original address: http://blog.csdn.net/eson_15/article/details/51347734
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.