009商城項目：商品類目的選擇——1前端頁面分析

 

 

咱們先來分析一下這個頁面。再來說Dao和Service層和Action層。

頁面是：

item-add.jsp:

我門看一下頁面呈現：

 

頁面代碼以下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
    <form id="itemAddForm" class="itemForm" method="post">
        <table cellpadding="5">
            <tr>
                <td>商品類目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">選擇類目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>
                </td>
            </tr>
            <tr>
                <td>商品標題:</td>
                <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品賣點:</td>
                <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品價格:</td>
                <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
                    <input type="hidden" name="price"/>
                </td>
            </tr>
            <tr>
                <td>庫存數量:</td>
                <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
            </tr>
            <tr>
                <td>條形碼:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
                </td>
            </tr>
            <tr>
                <td>商品圖片:</td>
                <td>
                     <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上傳圖片</a>
                     <input type="hidden" name="image"/>
                </td>
            </tr>
            <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
            <tr class="params hide">
                <td>商品規格:</td>
                <td>
                    
                </td>
            </tr>
        </table>
        <input type="hidden" name="itemParams"/>
    </form>
    <div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
    </div>
</div>
<script type="text/javascript">
    var itemAddEditor ;
    //頁面初始化完畢後執行此方法
    $(function(){
        //建立富文本編輯器
        //itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);
        //初始化類目選擇和圖片上傳器
        TAOTAO.init({fun:function(node){
            //根據商品的分類id取商品 的規格模板，生成規格信息。第四天內容。
            TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });
    //提交表單
    function submitForm(){
        //有效性驗證
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表單還未填寫完成!');
            return ;
        }
        //取商品價格，單位爲「分」
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        //同步文本框中的商品描述
        itemAddEditor.sync();
        //取商品的規格
        var paramJson = [];
        $("#itemAddForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        //把json對象轉換成字符串
        paramJson = JSON.stringify(paramJson);
        $("#itemAddForm [name=itemParams]").val(paramJson);
        
        //ajax的post方式提交表單
        //$("#itemAddForm").serialize()將表單序列號爲key-value形式的字符串
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }
        });
    }
    
    function clearForm(){
        $('#itemAddForm').form('reset');
        itemAddEditor.html('');
    }
</script>

咱們如今來分析這個頁面：

這個頁面的主要部分其實就是一個<div></div>標籤。

<div標籤裏面有一個form表單，和一個table。

主要是看js代碼：

var itemAddEditor ;    
$(function(){
        //建立富文本編輯器
        //itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);
        //初始化類目選擇和圖片上傳器
        TAOTAO.init({fun:function(node){
            //根據商品的分類id取商品 的規格模板，生成規格信息。第四天內容。
            TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });

這段代碼是說當頁面加載完了以後運行的。是jquery的入口函數。

咱們看這一行：

  itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);
這句話是說建立一個富文本編輯器，建立在哪裏呢？

name=desc；咱們看desc在哪裏？

 <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
也就是說在"商品描述"那裏建立了一個富文本編輯器。

也就是符合了咱們的頁面要求：

 

 接下來咱們看：

/初始化類目選擇和圖片上傳器
        TAOTAO.init({fun:function(node){
            //根據商品的分類id取商品 的規格模板，生成規格信息。第四天內容。
            TAOTAO.changeItemParam(node, "itemAddForm");
        }});

TaotTao是一個類。init是裏面的一個函數。那應該就是初始化操做了，咱們在common.js中找到這個函數以下：

commom.js代碼：

var TT = TAOTAO = {
    // 編輯器參數
    kingEditorParams : {
        //指定上傳文件參數名稱
        filePostName  : "uploadFile",
        //指定上傳文件請求的url。
        uploadJson : '/pic/upload',
        //上傳類型，分別爲image、flash、media、file
        dir : "image"
    },
    // 格式化時間
    formatDateTime : function(val,row){
        var now = new Date(val);
        return now.format("yyyy-MM-dd hh:mm:ss");
    },
    // 格式化鏈接
    formatUrl : function(val,row){
        if(val){
            return "<a href='"+val+"' target='_blank'>查看</a>";            
        }
        return "";
    },
    // 格式化價格
    formatPrice : function(val,row){
        return (val/1000).toFixed(2);
    },
    // 格式化商品的狀態
    formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            return '正常';
        } else if(val == 2){
            return '<span style="color:red;">下架</span>';
        } else {
            return '未知';
        }
    },
    
    init : function(data){
        // 初始化圖片上傳組件
        this.initPicUpload(data);
        // 初始化選擇類目組件
        this.initItemCat(data);
    },
    // 初始化圖片上傳組件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('\
                <div class="pics">\
                    <ul></ul>\
                </div>');
            // 回顯圖片
            if(data && data.pics){
                var imgs = data.pics.split(",");
                for(var i in imgs){
                    if($.trim(imgs[i]).length > 0){
                        _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                    }
                }
            }
            //給「上傳圖片按鈕」綁定click事件
            $(e).click(function(){
                var form = $(this).parentsUntil("form").parent("form");
                //打開圖片上傳窗口
                KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var imgArray = [];
                            KindEditor.each(urlList, function(i, data) {
                                imgArray.push(data.url);
                                form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    },
    
    // 初始化選擇類目組件
    initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
      //取消以前的click綁定，從新綁定爲裏面的新函數
            _ele.unbind('click').click(function(){
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'選擇類目',
                    onOpen : function(){
                        var _win = this;
                        $("ul",_win).tree({
                            url:'/item/cat/list',
                            animate:true,
                            onClick : function(node){
                                if($(this).tree("isLeaf",node.target)){
                                    // 填寫到cid中
                                    _ele.parent().find("[name=cid]").val(node.id);
                                    _ele.next().text(node.text).attr("cid",node.id);
                                    $(_win).window('close');
                                    if(data && data.fun){
                                        data.fun.call(this,node);
                                    }
                                }
                            }
                        });
                    },
                    onClose : function(){
                        $(this).window("destroy");
                    }
                }).window('open');
            });
        });
    },
    
    createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
    
    /**
     * 建立一個窗口，關閉窗口後銷燬該窗口對象。<br/>
     * 
     * 默認：<br/>
     * width : 80% <br/>
     * height : 80% <br/>
     * title : (空字符串) <br/>
     * 
     * 參數：<br/>
     * width : <br/>
     * height : <br/>
     * title : <br/>
     * url : 必填參數 <br/>
     * onLoad : function 加載完窗口內容後執行<br/>
     * 
     * 
     */
    createWindow : function(params){
        $("<div>").css({padding:"5px"}).window({
            width : params.width?params.width:"80%",
            height : params.height?params.height:"80%",
            modal:true,
            title : params.title?params.title:" ",
            href : params.url,
            onClose : function(){
                $(this).window("destroy");
            },
            onLoad : function(){
                if(params.onLoad){
                    params.onLoad.call(this);
                }
            }
        }).window("open");
    },
    
    closeCurrentWindow : function(){
        $(".panel-tool-close").click();
    },
    
    changeItemParam : function(node,formId){
        $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
              if(data.status == 200 && data.data){
                 $("#"+formId+" .params").show();
                 var paramData = JSON.parse(data.data.paramData);
                 var html = "<ul>";
                 for(var i in paramData){
                     var pd = paramData[i];
                     html+="<li><table>";
                     html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
                     
                     for(var j in pd.params){
                         var ps = pd.params[j];
                         html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";
                     }
                     
                     html+="</li></table>";
                 }
                 html+= "</ul>";
                 $("#"+formId+" .params td").eq(1).html(html);
              }else{
                 $("#"+formId+" .params").hide();
                 $("#"+formId+" .params td").eq(1).empty();
              }
          });
    },
    getSelectionsIds : function (select){
        var list = $(select);
        var sels = list.datagrid("getSelections");
        var ids = [];
        for(var i in sels){
            ids.push(sels[i].id);
        }
        ids = ids.join(",");
        return ids;
    },
    
    /**
     * 初始化單圖片上傳組件 <br/>
     * 選擇器爲：.onePicUpload <br/>
     * 上傳完成後會設置input內容以及在input後面追加<img> 
     */
    initOnePicUpload : function(){
        $(".onePicUpload").click(function(){
            var _self = $(this);
            KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {
                this.plugin.imageDialog({
                    showRemote : false,
                    clickFn : function(url, title, width, height, border, align) {
                        var input = _self.siblings("input");
                        input.parent().find("img").remove();
                        input.val(url);
                        input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
                        this.hideDialog();
                    }
                });
            });
        });
    }
};

這段代碼：

 // 初始化選擇類目組件
    initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'選擇類目',

是說頁面的上的「選擇類目」從新給他綁定一個點擊事件，一旦點擊觸發這個新的點擊事件。也就是生成了一個新的window窗口。