文章出處

    添加商品部分原理和添加商品類別是一樣的，不過要比商品類別復雜，因為商品的屬性有很多，對應的數據庫中的字段也就多了，添加商品還有個選項是上傳圖片，這一小塊內容會在下一篇博客中單獨說明，因為這涉及到一個知識點，就是Struts2實現文件上傳功能。其他廢話不多說了，現在開始完善添加商品部分的代碼：

1. 添加商品

1.1 添加商品的UI實現

        首先完成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 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 添加商品的后臺實現

@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 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>  
             <!-- 遠程加載管理員數據 -->  
             <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>

   更新部分與商品類別的更新基本相同，不再贅述，下面是后臺更新部分的實現：

 

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的文件上傳功能。


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄