添加商品部分原理和添加商品類別是一樣的，參考文章：添加和更新商品類別，不過要比商品類別複雜，因為商品的屬性有很多，對應的數據庫中的字段也就多了，添加商品還有個選項是上傳圖片，這一小塊內容會在下一篇文章中單獨說明，因為這涉及到一個知識點，就是Struts2實現文件上傳功能。其他廢話不多說了，現在開始完善添加商品部分的代碼：
1. 添加商品
1.1 添加商品的UI實現<br />首先完成query.jsp中添加商品部分的代碼：
接下來我們看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:10px; } </style> <script type="text/javascript"> $(function(){ //自定義驗證方法向validatebox.defaults.rules中註冊新函數$.extend($.fn.validatebox.defaults.rules,{ //函數的名稱：{函數的實現體(又是一個json對象，裡麵包括函數的實現，和錯誤消息的設置)} format:{ //函數實現，如果返回為false，則驗證失敗validator: function(value,param){ //獲取當前文件的後綴名var ext = value.substring(value.lastIndexOf('.') + 1); //獲取支持的文件後綴名，然後比較即可var arr = param[0].split(","); for(var i = 0; i < arr.length; i++) { if(ext == arr[i]) return true; } return false; }, //錯誤消息message: '文件後綴必須為:{0}' } }); //對商品類別的下拉列錶框進行遠程加載$("#cc").combobox({ //將請求發送給categoryAction中的query方法處理，這裡需要將處理好的數據返回到這邊來顯示了，所以後台需要將數據打包成json格式發過來url:'category_query.action', valueField:'id', textField:'type', //我們下拉列表中顯示的是所有的商品類別panelHeight:'auto', //自適應高度panelWidth:120,//下拉列表是兩個組件組成的width:120, //要同時設置兩個寬度才行editable:false, //下拉框不允許編輯//combobox繼承combo繼承validatebox，所以可以直接在這裡設置驗證required:true, missingMessage:'請選擇所屬類別' }); $("input[name=name]").validatebox({ required:true, missingMessage:'請輸入商品名稱' }); $("input[name=price]").numberbox({ required:true, missingMessage:'請輸入商品價格', min:0, precision:2, //保留兩位小數prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'請上傳商品圖片', //設置自定義方法validType:"format['gif,jpg,jpeg,png']"//中括號裡面是參數}); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'請輸入商品的簡單描述' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'請輸入商品的簡單描述' }); //窗體彈出默認時禁用驗證$("#ff").form("disableValidation"); //註冊button的事件$("#submit").click(function(){ //開啟驗證$("#ff").form("enableValidation"); //如果驗證成功，則提交數據if($("#ff").form("validate")) { //調用submit方法提交數據$("#ff").form('submit', { url: 'product_save.action', success: function(){ //如果成功了，關閉當前窗口parent.$("#win").window("close"); parent.$("iframe[title='商品管理']").get(0).contentWindow.$("#dg").datagrid("reload"); } }); } }); //註冊button的事件$("#reset").click(function(){ $("#ff").form("disableValidation");//重置不需要表單驗證//重置當前表單數據$("#ff").form("reset"); }); }); </script> </head> <body> <form id="ff" method="post" enctype="multipart/form-data"> <div> <label>商品名稱:</label> <input type="text" name="name" /> </div> <div> <label>商品價格:</label> <input type="text" name="price" /> </div> <div> <label>圖片上傳:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label>所屬類別：</label> <input id="cc" name="category.id"/> </div> <div> <label>加入推薦:</label> 推薦:<input type="radio" name="commend" checked="checked" value="true" /> 不推薦:<input type="radio" name="commend" value="false" /> </div> <div> <label>是否有效:</label> 上架:<input type="radio" name="open" checked="checked"value="true" /> 下架:<input type="radio" name="open" value="false" /> </div> <div> <label>簡單描述:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label>詳細描述:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <a id="submit" href="#">添加</a> <a id="reset" href="#">重置</a> </div> </form> </body> </html>我們主要來看一下上面js代碼中中自定義方法部分，主要是定義對上傳的圖片的驗證，具體分析如下：
然後在圖片驗證這塊就可以使用自定義的方法了：
1.2 添加商品的後台實現
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //省略其他代碼…… public void save() throws Exception { //處理上傳的圖片，下一篇博客專門分析struts2文件上傳model.setDate(new Date()); //設置一下當前時間，因為前台沒有把時間字段傳進來，這裡自己設置一下即可System.out.println(model); //商品信息入庫productService.save(model); } } 2. 更新商品
2.1 更新商品的UI實現
首先看下query.jsp中更新商品部分的代碼：
接下來看看update.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(){ //iframe中的datagrid對象var dg = parent.$("iframe[title='商品管理']").get(0).contentWindow.$("#dg"); //對商品類的下拉列錶框進行遠程加載$("#cc").combobox({ //將請求發送給categoryAction中的query方法處理，這裡需要將處理好的數據返回到這邊來顯示了，所以後台需要將數據打包成json格式發過來url:'category_query.action', valueField:'id', textField:'type', //我們下拉列表中顯示的是商品的類別名panelHeight:'auto', //自適應高度panelWidth:120,//下拉列表是兩個組件組成的width:120, //要同時設置兩個寬度才行editable:false, //下拉框不允許編輯//combobox繼承combo繼承validatebox，所以可以直接在這裡設置驗證required:true, missingMessage:'請選擇所屬類別' }); // 完成數據的回顯，更新時，用戶肯定先選擇了要更新的那一行，首先我們得拿到那一行var rows = dg.datagrid("getSelections"); //將拿到的那一行對應的數據字段加載到表單裡，實現回顯$("#ff").form('load',{ id:rows[0].id, name:rows[0].name, price:rows[0].price, remark:rows[0].remark, xremark:rows[0].xremark, commend:rows[0].commend, open:rows[0].open, 'category.id':rows[0].category.id //EasyUI不支持account.id這種點操作，所以要加個引號}); //回顯完了數據後，設置一下驗證功能$("input[name=name]").validatebox({ required:true, missingMessage:'請輸入類別名稱' }); $("input[name=price]").numberbox({ required:true, missingMessage:'請輸入商品價格', min:0, precision:2, //保留兩位小數prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'請上傳商品圖片', //設置自定義方法validType:"format['gif,jpg,jpeg,png']"//中括號裡面是參數}); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'請輸入商品的簡單描述' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'請輸入商品的簡單描述' }); //窗體彈出默認時禁用驗證$("#ff").form("disableValidation"); //註冊button的事件$("#btn").click(function(){ //開啟驗證$("#ff").form("enableValidation"); //如果驗證成功，則提交數據if($("#ff").form("validate")) { //調用submit方法提交數據$("#ff").form('submit', { url: 'product_update.action', //提交時將請求傳給productAction的update方法執行success: function(){ //如果成功了，關閉當前窗口，並刷新頁面parent.$("#win").window("close"); dg.datagrid("reload"); } }); } }); }); </script> </head> <body> <form id="ff" method="post" enctype="multipart/form-data"> <div> <label for="name">商品名稱:</label> <input type="text" name="name" /> </div> <div> <label for="price">商品價格:</label> <input type="text" name="price" /> </div> <div> <label>更新圖片:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label for="account">所屬商品類:</label> <!-- 遠程加載管理員數據--> <input id="cc" name="category.id" /> </div> <div> <label for="remark">簡單描述:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label for="xremark">詳細描述:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <label for="commend">推薦商品:</label> 是:<input type="radio" name="commend" value="true" /> 否:<input type="radio" name="commend" value="false" /> </div> <div> <label for="open">有效商品:</label> 上架:<input type="radio" name="open" value="true" /> 下架:<input type="radio" name="open" value="false" /> </div> <div> <a id="btn" href="#" data-options="iconCls:'icon-edit'">更新</a> <input type="hidden" name="id" /> </div> ` </form> </body> </html>更新部分與商品類別的更新基本相同，不再贅述，下面是後台更新部分的實現：
2.2 更新商品的後台實現
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //省略其他代碼…… public void update() throws Exception { //處理上傳的圖片，下一篇博客專門分析struts2文件上傳model.setDate(new Date()); //設置一下當前時間，因為前台沒有把時間字段傳進來，這裡自己設置一下即可System.out.println(model); //更新商品productService.update(model); } }跟更新商品類別相比，唯一多了個圖片上傳的操作，要在後台處理上傳的圖片，我們在下一篇文章詳細分析struts2的文件上傳功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。