博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
排序箭头,升序,降序简单实现
阅读量:7010 次
发布时间:2019-06-28

本文共 1686 字,大约阅读时间需要 5 分钟。

css不好实现的效果,通过背景图片来弥补。

422101-20160806110242528-745390242.png

css

html

                默认                销量                新品                                     价格                            

效果有了,剩下的就是通过js逻辑和程序逻辑来实现排序了。

实现功能

html改造

默认销量新品     价格

增加date-type,统一的class 'sort'。

js事件

$('.sort').click(function() {    var type = $(this).data('type');    var category_id = '{sh:$category_id}';    var sort;    if ($(this).hasClass('sorted')) { // 降序        $(this).removeClass('sorted').addClass('sortedDESC');        sort = '-1';    }else if ($(this).hasClass('sortedASC')) { // 降序        $(this).removeClass('sortedASC').addClass('sortedDESC');        sort = '-1';    }else if ($(this).hasClass('sortedDESC')) { // 升序        $(this).removeClass('sortedDESC').addClass('sortedASC');        sort = '1';    }    if (type =='default') {        location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"'))}";    } else {        location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"','"+type+"'=>'"+sort+"'))}";    }    });

后台处理

if ($sale = $this->_request('sale')) {    if ($sale == '-1') {        $order = '(salecount+fakemembercount) desc';    }    if ($sale == '1') {        $order = '(salecount+fakemembercount) asc';    }    $this->assign('sale',$sale);}if ($price = $this->_request('price')) {    if ($price == '-1') {        $order = 'oprice desc';    }    if ($price == '1') {        $order = 'oprice asc';    }    $this->assign('price',$price);}if ($new = $this->_request('new')) {    if ($new == '-1') {        $order = 'addtime desc';    }    if ($new == '1') {        $order = 'addtime asc';    }    $this->assign('new',$new);}

422101-20160806153026262-982723456.png

422101-20160806152847340-985461255.png

tips:这里是大概的思路,具体需要你们根据实际情况去实现,可以优化成异步加载。

转载地址:http://fqttl.baihongyu.com/

你可能感兴趣的文章
tensorflow 在加载大型的embedding模型参数时,会遇到cannot be larger than 2GB
查看>>
Flutter的教程:ListView
查看>>
xxl-job安装教程
查看>>
SpringBoot(十八)@value、@Import、@ImportResource、@PropertySource
查看>>
[dubbo] Dubbo API 笔记——配置参考
查看>>
The last access date is not changed even after reading the file on Windows 7
查看>>
SQL Server 字符串处理函数
查看>>
恢复系统管理员密码的五大奇招
查看>>
英语形容“漂亮女孩”知多少
查看>>
GridView 获取当前行的索引值
查看>>
PHPCMS V9二次开发:内容模块PC标签调用详解
查看>>
Virtual-Key Codes
查看>>
Azure China (3) 使用Visual Studio 2013证书发布Cloud Service至Azure China
查看>>
xmapp 404设置
查看>>
SQL Server中, DateTime (日期)型操作的 SQL语法
查看>>
iisweb服务器完美解决方案
查看>>
请教SQL Server登录失败的问题
查看>>
对象和流
查看>>
简单的兼容的login页面
查看>>
jquery之超简单的div显示和隐藏特效demo
查看>>