✅P187-188_商城业务-检索服务-页面排序功能-页面排序字段回显

一、页面排序功能

1.1 开篇

页面排序功能需要保证，点击某个按钮时，样式会变红，并且其他的样式保持最初的样子；

点击某个排序时首先按升序显示，再次点击再变为降序，并且还会显示上升或下降箭头；

页面排序跳转的思路是通过点击某个按钮时会向其class属性添加/去除desc，并根据属性值进行url拼接。

---

1.2 实现步骤

cfmall-search/src/main/resources/templates/list.html

1.2.1 绑定点击事件

为a标签定义class，绑定点击事件

    $("sort_a").click(function () {
        return false;
    });

1.2.2 为选中元素设置样式

function changeStyle(ele) {
    //被点击元素变为选中状态
    $(".sort_a").css({"color": "#333", "border-color": "#CCC", "background": "#FFF"})
    $(ele).css({"color": "#FFF", "border-color": "#e4393c", "background": "#e4393c"})
    //默认为降序排序
    $(ele).toggleClass("desc");
    //添加升降符号
    $(".sort_a").each(function () {
        // $(this).text()获取当前点击元素的文本内容
        //添加升降符号之前需要清空元素的升降符号
        var text = $(this).text().replace("↓", "").replace("↑", "");
        $(this).text(text);
    });
    if ($(ele).hasClass("desc")) {
        var text = $(ele).text().replace("↓", "").replace("↑", "");
        text = text + "↓";
        $(ele).text(text);
    } else {
        var text = $(ele).text().replace("↓", "").replace("↑", "");
        text = text + "↑";
        $(ele).text(text);
    }
}

1.2.3 为排序元素自定义属性

1.2.4 改写Url替换方法

function replaceParamVal(url, paramName, replaceVal) {
    var oUrl = url.toString();
    if (oUrl.indexOf(paramName) != -1) {
        var re = eval('/(' + paramName + '=)([^&]*)/gi');
        var nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
        return nUrl;
    } else {
        if (oUrl.indexOf("?") != -1) {
            var nUrl = oUrl + "&" + paramName + "=" + replaceVal;
            return nUrl;
        } else {
            var nUrl = oUrl + "?" + paramName + "=" + replaceVal;
            return nUrl;
        }
    }
};

1.2.5 跳转指定路径

$(".sort_a").click(function () {
    // 设置样式
    changeStyle(this);
    // 2、跳转到指定位置
    var sort = $(this).attr("sort");
    sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc";
    location.href = replaceParamVal(location.href, "sort", sort);
    // 禁用默认行为
    return false;
});

1.3 测试效果

---

二、页面排序字段回显

2.1 页面跳转之后样式回显

• th:with： 用于声明变量，
• #strings：即调用字符串工具类

th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore'))
     ?'color: #FFF;border-color:#e4393c;background:#e4393c'
     :'color: #333;border-color:#CCC;background:#FFF'}"
     
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount'))
     ?'color: #FFF;border-color:#e4393c;background:#e4393c'
     :'color: #333;border-color:#CCC;background:#FFF'}"    
     
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice'))
     ?'color: #FFF;border-color:#e4393c;background:#e4393c'
     :'color: #333;border-color:#CCC;background:#FFF'}"

2.2 根据URL动态添加class

th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"

th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"

th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"

2.3 动态添加升降符号

综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]

销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]

价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]

---

三、页面测试效果

---

四、代码

cfmall-search/src/main/resources/templates/list.html

<!--综合排序-->
<div class="filter_top">
    <div class="filter_top_left" th:with="p=${param.sort}">
        <a class="sort_a" sort="hotScore"
           th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
           th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore'))
                ?'color: #FFF;border-color:#e4393c;background:#e4393c'
                :'color: #333;border-color:#CCC;background:#FFF'}"
           href="/static/search/#">综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]
        </a>

        <a class="sort_a" sort="saleCount"
           th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
           th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount'))
                ?'color: #FFF;border-color:#e4393c;background:#e4393c'
                :'color: #333;border-color:#CCC;background:#FFF'}"
           href="/static/search/#">销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]
        </a>

        <a class="sort_a" sort="skuPrice"
           th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
           th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice'))
                ?'color: #FFF;border-color:#e4393c;background:#e4393c'
                :'color: #333;border-color:#CCC;background:#FFF'}"
           href="/static/search/#">价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]
        </a>

        <a href="/static/search/#">评论分</a>
        <a href="/static/search/#">上架时间</a>
    </div>
    <div class="filter_top_right">
        <span class="fp-text">
           <b>1</b><em>/</em><i>169</i>
       </span>
        <a href="/static/search/#" class="prev"><</a>
        <a href="/static/search/#" class="next"> > </a>
    </div>
</div>