移动商城第五篇【查看、删除、编辑品牌】

查看品牌

上一篇中我们已经可以顺利添加商品了，一般地，我们添加完商品之后会跳转到我们的查看商品的页面上…

Contoller拿到数据库中的数据

    @RequestMapping("/listBrand.do")
    public String  listBrand(Model model) throws IOException {
        List<EbBrand> brandList = ebBrandService.selectBrand();
        model.addAttribute("brandList", brandList);
        return "item/listbrand";
    }

把文件服务器的路径添加到总配置文件中

<c:set var="file_path" value="http://localhost:8081/file"/>

        <c:forEach items="${brandList}" var="brand">
            <tr>
                <td>${brand.brandId}</td>
                <td>
                    <%--这里需要图片的全路径，最好我们把前部分的路径在配置文件中写起来--%>
                    <img id='imgsImgSrc' src="${file_path}${brand.imgs}" height="50" width="50"/></td>
                <td>${brand.brandName}</td>
                <td class="nwp">${brand.website}</td>
                <td class="nwp">${brand.brandDesc}</td>
                <td>${brand.brandSort}</td>
                <td>
                    <a href="${path }/shop/item/editbrand.jsp?brandId="${brand.brandId}>编辑</a>
                    <a href="#" onclick="singleDel(${brand.brandId})">删除</a>
                </td>
            </tr>
        </c:forEach>

编辑品牌

一般地，我们的品牌名称是不会轻易变更的，因此我们在编辑的时候默认不让它变更。

我们有两种方式让用户修改不了

• disable
• readonly

一般地，我们都是使用readonly，因为使用disable的话，后台是获取不到值的

在更新的时候，注意要把id和我们的图片值传递过去，好让它修改

      <input type='hidden' id='imgs' name='imgs' value="${brand.imgs }" reg2="^.+$" tip="亲！您忘记上传图片了。"/>
      <input type="hidden" name="brandId" value="${brand.brandId }">

删除品牌

在删除品牌之前，询问是否要删除

    function singleDel(brandId){
        if(confirm("你确认要删除该品牌吗?")){
            window.location.href = "${path}/brand/deleteBrand.do?brandId="+brandId;
        }
    }

添加品牌优化

有的时候，可能因为我们的网络原因，用户填写完表单的时候，可能会多次发送添加品牌的请求，因此我们可以使用模态窗口来阻止这种情况的发生：

<%--操作请求中--%>
<div id="refundLoadDiv" class="alt" style="display:none">
    <div class="t"></div>
    <div class="c set">
        <ul class="uls">
            <li style="text-align:center;">
                <img src="<c:url value='/ecps/console/res/imgs/loading.gif'/>" />操作请求中... ...
            </li>
        </ul>
    </div>
    <div class="f"></div>
</div>

function tipShow(idName){

    var idObj = $(idName);
    var idBgObj = $("#bgWindow");

    if(idBgObj.length == 0){
        var iframe,div;
        div = $("<div></div>");
        div.attr({id:"bgWindow",style:"display:none"});
        iframe = $("<iframe></iframe>");
        iframe.attr({id:"bgWindowIframe",src:"about:blank",margin"0",marginheight:"0",frameBorder:"no",framespacing:"0",allowtransparency:"true"});
        div.append(iframe);
        $(document.body).append(div);
        idBgObj = $("#bgWindow");  
    }

    var winH = $(window).height();
    var docH = $(document.body).height();
    if(winH > docH){docH = winH;}

    var winW = $(window).width();
    var docW = $(document.body).width();
    if(winW > docW){docW = winW;}

    var scrollH = $(document).scrollTop();
    if(scrollH == undefined){scrollH = 0}
    //alert(idObj.height());
    var t = parseInt((winH - idObj.height())/2);
    if(idObj.css("position") == "absolute"){t = t + scrollH;}
    if(t != parseInt(idObj.css("top"))){idObj.css("top",t);}

    var l = parseInt((winW - idObj.width())/2);
    if(l < 0){l = 0;}
    if(l != parseInt(idObj.css("left"))){idObj.css("left",l);}

    if(docW != parseInt(idBgObj.css("width"))){idBgObj.css("width",docW);}
    if(docH != parseInt(idBgObj.css("height"))){idBgObj.css("height",docH);idBgObj.find("iframe").css("height",docH);}

    idBgObj.show();
    idObj.show();

    window.onresize = function(){
        if(idObj.css("display") == "block"){tipShow(idName);}
    };
    window.onscroll = function(){
        if(idObj.css("display") == "block"){tipShow(idName);}
    };

    var close = idName + "Close";
    var reset = idName + "Reset";
    var ok = idName + "Ok";
    if($(close).length == 1){$(close).click(function(){tipHide(idName);});}
    if($(reset).length == 1){$(reset).click(function(){tipHide(idName);});}
    if($(ok).length == 1){$(ok).click(function(){tipHide(idName);});}
}

如果校验没有问题，那么就弹出模态窗口

if(isSubmit) {
    showTip("#refundLoadDiv");
}

---