排序箭头,升序,降序简单实现
2016-08-06 11:06
393 查看
css不好实现的效果,通过背景图片来弥补。
css
html
效果有了,剩下的就是通过js逻辑和程序逻辑来实现排序了。
增加date-type,统一的class 'sort'。
js事件
后台处理
tips:这里是大概的思路,具体需要你们根据实际情况去实现,可以优化成异步加载。
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:这里是大概的思路,具体需要你们根据实际情况去实现,可以优化成异步加载。
相关文章推荐
- 快速排序:升序+降序----java实现
- C语言链表中数组实现数据选择排序,升序、降序功能主要难点
- 快速排序:升序+降序----java实现
- 函数指针作为函数参数,实现冒泡排序的升序排序和降序排序
- 根据对象中某一属性进行升序降序排序的javascript实现
- 简单易用的数组排序(升序、降序)
- LINQ中的OrderBy实现多字段升序、降序排序实现
- 同一按钮,实现升序,降序 排序
- 函数指针作为函数參数,实现冒泡排序的升序排序和降序排序
- 请通过代码实现以下功能:输入一个5X5的二维数组,将数组进行排序,其中一维数组按照平均值降序,一维数组内部升序排列。
- mapreduce,自定义排序,分区,分组实现按照年份升序排序,温度降序排序
- C语言链表中数组实现数据选择排序,升序、降序功能主要难点
- how to 实现一个排序 ,第一排序按状态升序,第二排序状态为2 时,按id 升序,状态为其它时,按状态降序
- 通过orderby关键字,LINQ可以实现升序和降序排序。LINQ还支持次要排序。
- LINQ中的OrderBy实现多字段升序、降序排序实现
- AngularJs实现 每列排序,输入查找、插入升序降序图标
- 简单插入排序的C语言实现
- 最简单的对Java List列表按中文拼音排序的实现方式
- JavaScript简单的升序降序
- 简单的实现点击箭头图片切换