移动商城第五篇【查看、删除、编辑品牌】
查看品牌
上一篇中我们已经可以顺利添加商品了,一般地,我们添加完商品之后会跳转到我们的查看商品的页面上…
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",marginwidth:"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");
}
如果您觉得这篇文章帮助到了您,可以给作者一点鼓励
![](https://images2017.cnblogs.com/blog/1053130/201801/1053130-20180121152206537-844683674.png)