巴巴运动网学习笔记(61-65)

1.为产品实现选择分级类别的功能

a.根据parentId,获取该父类所有的产品类别数据

public ActionForward selectUI(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
    throws Exception {
        ProductForm productForm = (ProductForm)form;
        String jpql;
        List<Object> params = new ArrayList<Object>();
        if(productForm.getProductTypeId()>0){
            jpql = " p.parent.id = ?1";
            params.add(productForm.getProductTypeId());
        }else {
            jpql = " p.parent is null";
        }
                
request.setAttribute("productTypes", productService.getScrollResult(ProductType.class, -1, -1, jpql, params.toArray()).getResultList());
        return mapping.findForward("typelist");
    }
}

b.在页面中，根据是否有子类，判断是否可以选择

<c:forEach items="${productTypes}" var="type" varStatus="status">        
        <td><c:if test="${fn:length(type.child)>0}">
            <a style="text-decoration: none" href="<html:rewrite action='/control/product/manager'/>?method=selectUI&productTypeId=${type.id }" >${type.name}</a>
        </c:if>
        <c:if test="${fn:length(type.child)==0}">
            <input type="radio" name="types" onClick="javascript:getDicName('${type.id }','${type.name}')"/>${type.name }
        </c:if></td>
        <c:if test="${status.count%5==0}"></tr><tr></c:if>
    </c:forEach>

2.整齐排列选择页面中的内容(5个一行)

<table width="100%" border="0" cellspacing="1" cellpadding="1">
    <tr><td id="typecontent">
    <table width="100%" border="0">
    <tr>
    <c:forEach items="${productTypes}" var="type" varStatus="status">        
        <td><c:if test="${fn:length(type.child)>0}">
            <a style="text-decoration: none" href="<html:rewrite action='/control/product/manager'/>?method=selectUI&productTypeId=${type.id }" >${type.name}</a>
        </c:if>
        <c:if test="${fn:length(type.child)==0}">
            <input type="radio" name="types" onClick="javascript:getDicName('${type.id }','${type.name}')"/>${type.name }
        </c:if></td>
        <c:if test="${status.count%5==0}"></tr><tr></c:if>
    </c:forEach>
    </tr></table>

3.在类别选择界面中增加导航菜单

a.根据当前productTypeId来获取导航数据,直到productTypeId为空

Stack<ProductType> navigation = new Stack<ProductType>();
        ProductType parent = productService.find(ProductType.class,productForm.getProductTypeId());
        while(parent!=null){
            navigation.push(parent);
            parent = parent.getParent();
        }
        List<ProductType> navigationList = new ArrayList<ProductType>();
        while(!navigation.empty()){
            navigationList.add(navigation.pop());
        }
        request.setAttribute("navigation", navigationList);

b.在jsp页面中显示导航

>><a href="<html:rewrite action='/control/product/manager'/>?method=selectUI">顶级分类</a>
<c:forEach items="${navigation}" var="nv">
>><a href="<html:rewrite action='/control/product/manager'/>?method=selectUI&productTypeId=${nv.id }">${nv.name }</a>        
</c:forEach>

4.优化产品表单的客户端验证代码
a.设置一个类来存储每一个输入项，该类包括输入项的名称和错误描述

function formField(name,desc){
    this.name = name;
    this.desc = desc;
}

b.将多个类存储到数组中，改多个if为一个for，检测每一个类

function verifyForm(objForm){
    tinyMCE.triggerSave();//手动把iframe的值赋给textarea表单元素
    var formArray = new Array(new formField("name","产品名称"),new formField("productType","产品类别"),new formField("basePrice","底价"),
    new formField("marketPrice","市场价"),new formField("sellPrice","销售价"),new formField("code","货号"),new formField("styleName","样式名称"),
    new formField("image","样式图片"),new formField("name","产品名称"),new formField("brandId","品牌"),new formField("sex","性别"),new formField("description","产品描述"));
    for(var i=0;i<formArray.length;i++){
        var objField = eval("objForm."+formArray[i].name);
        if(trim(objField.value)==""){
            alert(formArray[i].desc+"不能为空");
            if(objfield.type!="hidden") objfield.focus();
            return false;
        }    
    }
    var fileName = trim(objForm.image.value);
    if(fileName!=""){
        var extName = fileName.substring(fileName.lastIndexOf('.')+1,fileName.split('').length);
        var validateType = ["bmp","png","gif","jpg","txt","pdf","doc","xls","ppt"];
        for(var i=0;i<validateType.length;i++){
            if(extName==validateType[i])
                return true;
        }
        alert("图片格式不合法");
        return false;
    }
}

5.实现html编辑器本地图片上传