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