排序箭头,升序,降序简单实现
css不好实现的效果,通过背景图片来弥补。
css
<style>.sortedASC{
background: url({sh::PUB}img/icon-table-sort-asc.png) no-repeat 80% 5px #eee;}.sorted{
background: url({sh::PUB}img/icon-table-sort.png) no-repeat 80% 9px #eee ;}.sortedDESC{
background: url({sh::PUB}img/icon-table-sort-desc.png) no-repeat 80% 11px #eee;}</style>
html
<tr role="row"><th role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending">默认</th><th class="sort sortedASC" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">销量</th><th class="sort sortedDESC" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">新品</th><th class="sort sorted" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Update: activate to sort column ascending"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> 价格</th></tr>
效果有了,剩下的就是通过js逻辑和程序逻辑来实现排序了。
实现功能
html改造
<th class="sort" data-type="default" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending">默认</th>
<th class="sort <if condition='$sale eq 1'>sortedASC<elseif condition='$sale eq -1'/>sortedDESC<else />sorted</if>" data-type="sale" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">销量</th>
<th class="sort <if condition='$new eq 1'>sortedASC<elseif condition='$new eq -1'/>sortedDESC<else />sorted</if>" data-type="new" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">新品</th>
<th class="sort <if condition='$price eq 1'>sortedASC<elseif condition='$price eq -1'/>sortedDESC<else />sorted</if>" data-type="price" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Update: activate to sort column ascending"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> 价格
</th>
增加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);
}
tips:这里是大概的思路,具体需要你们根据实际情况去实现,可以优化成异步加载。
本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5743537.html,如需转载请自行联系原作者
排序箭头,升序,降序简单实现相关推荐
- Java的Comparator排序(升序降序)理解
Java的Comparator排序(升序降序)理解 int compare(T o1, T o2); 这里o1表示位于前面的对象,o2表示后面的对象 返回-1(或负数),表示不需要交换01和02的位置 ...
- Comparator::compare设定排序的升序 降序
java.util.Comparator中 compare(T o1, T o2) 函数,其实现决定升序降序.举例如下:对某个对象的var类例进行排序 int compare(T o1, T o2) ...
- 列表中的查找,排序的升序降序
1.查找某个元素 这里的查找要么在,要么就是不在,这里我们便使用了if判断语句.判断某个元素是否存在于列表中.如下代码: namelist=["小王","小李" ...
- Java List集合排序,升序降序
在C#开发中,如果一个List集合需要进行重新排序,直接Orderby即可,但是在Java中,思路一样,但是写法不一样,特记录,方便各位码友学习使用. 自己使用版本 List<UserInfo& ...
- 集合(list、set、map)的简单升序降序实现
这篇博客主要总结一下平时比较常用的几种集合排序(升序降序)方法. 1.List排序 1)基本数据类型的包装类集合排序 import com.xxxx.domain.Emp; import org.ju ...
- js对象、数组对象根据属性值进行升序降序排序
1.js对象排序 // 排序之前 let objs = {f: {id: 2,name: '2'},a: {id: 3,name: '3'},c: {id: 1,name: '1'} }// 根据对象 ...
- C# List.sort排序详解(多权重,升序降序)
很多人可能喜欢Linq的orderBy排序,可惜U3D里面linq在Ios上会报错,所以就必须使用list的排序. 其实理解了并不难 升序降序比较 sort有三种结果 1,-1,0分别是大,小,相等. ...
- java升序降序排列desc,TreeMap升序|降序排列和按照value进行排序
TreeMap 升序|降序排列 import java.util.Comparator; import java.util.TreeMap; public class Main { public st ...
- python中升序降序问题_飘逸的python - 有的升序有的降序的情况下怎么多条件排序...
之前在统计导出各区服玩家消费的时候需要进行升序降序混搭的多条件排序. 需求是这样的.区服从小到大排,如果区服相同,则按消费从大到小排. 实现方法是利用python的sort算法是稳定排序,对数据进行多 ...
- java treemap value排序_Java TreeMap升序|降序排列和按照value进行排序的案例
TreeMap 升序|降序排列 import java.util.Comparator; import java.util.TreeMap; public class Main { public st ...
最新文章
- 浏览器从输入url到页面加载完成发生了什么
- SpringBoot系列三:SpringBoot基本概念(统一父 pom 管理、SpringBoot 代码测试、启动注解分析、配置访问路径、使用内置对象、项目打包发布)...
- 软考中高项学员:2016年3月14日作业
- 【数据结构与算法】之深入解析“迷宫中离入口最近的出口”的求解思路与算法示例
- linux为什么创建不了分区,linux下扩容磁盘扩展分区解决因无法创建新分区不能扩容lvm问题...
- sklearn自学指南(part48)--截断奇异值分解和潜在语义分析
- 设置过mysql远程连接后仍然无法进行远程连接 (mysql mysql报错2003 can't connect)
- Excel VBA遍历文件
- asp.net 开发知识小结【转】
- 机器学习(七)支持向量机svm中级篇
- 小程序短视频项目———上传短视频业务流程简介
- Linux之glibc2.17版本升级至2.31
- Chrome浏览器修改繁体为中文简体
- 转:SQL Server 2005“错误1706。安装程序找不到需要的文件。
- plantcare的html打开空白,PlantCARE, a plant cis-acting regulatory element database
- java利用poi导出excel功能-附带图片导出
- esp分区中的EFI启动项文件有什么用
- Linux内存管理(二十六):slub 分配器初始化
- [python,2018-06-25] 高德纳箭号表示法
- 布隆过滤器的误判率该如何计算?
热门文章
- n个人选k个c语言_leetcode之第k个缺失的正整数
- pytorch model.eval()的作用
- 已知gcd和lcm求a+b最小和?------数论
- 文件处理之解决使用 feof(c语言)或(fin.eof())出现多读问题
- keepalived重新加载配置——不用重启不发生切换
- 2020年旷世校招JAVA岗笔试第一题
- 《系统集成项目管理工程师》必背100个知识点-51项目人力资源管理
- 笔记-信息系统安全管理-信息系统的安全属性
- Vue+Openlayers实现地图缩放图标等比例缩放
- VSCode来绘制流程图真是得心应手