仿天猫筛选栏功能实现

首先，有五个条件选择器，其中价格的有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>

前端代码比较多，就贴了部分，仅供参考。