首先,有五个条件选择器,其中价格的有up和down两种状态,我看了下天猫的,同一个条件第二次点击的时候,就会进行默认的“综合”的查询,而且这个五个都互不干扰,所以我在后台设置了一个flag数据进行标记。
效果
controller类
@RequestMapping("/forecategory")
public String category(int cid,String sort, Model model) {
Category c = categoryService.getCategroy(cid);
int flag[]=new int[5];//flag数组标记条件选择器的状态
productService.fill(c);
productService.setSaleAndReviewNumber(c.getProducts());
if(null!=sort){
switch(sort){
case "review":
Arrays.fill(flag,0);//将数组清零,避免点击其他条件的时候,直接进行综合查询
flag[0]=1;
Collections.sort(c.getProducts(),new ProductReviewComparator());
break;
case "date" :
Arrays.fill(flag,0);
flag[1]=1;
Collections.sort(c.getProducts(),new ProductDateComparator());
break;
case "saleCount" :
Arrays.fill(flag,0);
flag[2]=1;
Collections.sort(c.getProducts(),new ProductSaleCountComparator());
break;
case "price":
Arrays.fill(flag,0);
flag[3]=1;
Collections.sort(c.getProducts(),new ProductPriceComparator());
break;
case "unprice":
Arrays.fill(flag,0);
flag[3]=2;
Collections.sort(c.getProducts(), new Comparator<Product>() {
@Override
public int compare(Product o1, Product o2) {
return (int)(o2.getPromotePrice()-o1.getPromotePrice());
}
});
break;
case "all":
Arrays.fill(flag,0);
flag[4]=1;
Collections.sort(c.getProducts(),new ProductAllComparator());
break;
}
}
model.addAttribute("c", c);
model.addAttribute("flag",flag);
return "fore/category";
}
前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script>
$(function(){
if(${! empty param.sort})
{
if(${param.sort=="price"})
{
$(".priceUpDown img").attr("src","static/img/bar/selectUp.svg")
}
else if(${param.sort=="unprice"}){
$(".priceUpDown img").attr("src","static/img/bar/selectDown.svg")
}
else
$(".priceUpDown img").attr("src","static/img/bar/noSelect.svg")
}
$("input.sortBarPrice").keyup(function(){
var num= $(this).val();
if(num.length==0){
$("div.productUnit").show();
return;
}
num = parseInt(num);
if(isNaN(num))
num= 1;
if(num<=0)
num = 1;
$(this).val(num);
var begin = $("input.beginPrice").val();
var end = $("input.endPrice").val();
if(!isNaN(begin) && !isNaN(end)){
console.log(begin);
console.log(end);
$("div.productUnit").hide();
$("div.productUnit").each(function(){
var price = $(this).attr("price");
price = new Number(price);
if(price<=end && price>=begin)
$(this).show();
});
}
});
$(".categorySortBar a").click(function () {
// alert(123);
$(this).addClass("isclicked")
})
});
function checkSort(sort) {
var num=$(".isclicked").attr("clickflag");
num++;
/*按照价格排序有两种情况升或者降*/
if(sort=="price"){
// alert(sort)
if(num==1){
location.href="?cid=${c.id}&sort=price";
// $(".priceUpDown img").attr("src","static/img/bar/selectUp.svg")
}
else if(num==2){
location.href="?cid=${c.id}&sort=unprice";
// $(".priceUpDown img").attr("src","static/img/bar/selectDown.svg")
}
else {
location.href="?cid=${c.id}&sort=all";
// $(".priceUpDown img").attr("src", "static/img/bar/noSelect.svg")
}
}
/*其他的只有一种,第二次点击后,进行默认的进行all的查询*/
else{
if(num==1){
location.href="?cid=${c.id}&sort="+sort
}
else
location.href="?cid=${c.id}&sort=all";
}
}
</script>
<div class="categorySortBar">
<table class="categorySortBarTable categorySortTable">
<tr>
<td <c:if test="${'all'==param.sort||empty param.sort}">class="grayColumn"</c:if> ><a href="JavaScript:checkSort('all');" clickflag="${flag[4]}">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td <c:if test="${'review'==param.sort}">class="grayColumn"</c:if> ><a href="JavaScript:checkSort('review');" clickflag="${flag[0]}">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td <c:if test="${'date'==param.sort}">class="grayColumn"</c:if>><a href="JavaScript:checkSort('date');" clickflag="${flag[1]}">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td <c:if test="${'saleCount'==param.sort}">class="grayColumn"</c:if>><a href="JavaScript:checkSort('saleCount');" clickflag="${flag[2]}">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td <c:if test="${'price'==param.sort || 'unprice'==param.sort}">class="grayColumn"</c:if>><a href="JavaScript:checkSort('price');" clickflag="${flag[3]}">价格
<span class="priceUpDown" >
<span><img src="static/img/bar/noSelect.svg"/></span>
</span>
</a>
</td>
</tr>
</table>
<table class="categorySortBarTable">
<tr>
<td><input class="sortBarPrice beginPrice" type="text" placeholder="请输入"></td>
<td class="grayColumn priceMiddleColumn">-</td>
<td><input class="sortBarPrice endPrice" type="text" placeholder="请输入"></td>
</tr>
</table>
</div>
前端代码比较多,就贴了部分,仅供参考。