开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

排序功能实现 jQuery实现排序 上移 下移

简介:
+关注继续查看

效果

思路,

跟相邻元素,互换sort。

前提是每一个元素都有自己的sort值,不为零。

复制代码
<tr id="{sh:$vo.id}">
                                    <td>
                                        <span onclick="up(this);" class="glyphicon glyphicon-arrow-up text-danger up" style="cursor: pointer;" title="上移" aria-hidden="true"></span>
                                        &nbsp;&nbsp;
                                        <span onclick="down(this);" class="glyphicon glyphicon-arrow-down text-danger down" style="cursor: pointer;" title="下移" aria-hidden="true"></span>
                                    </td>
                                    <td>
                                        <span title="{sh:$vo.user_id}">{sh:$vo.store_name}</span>
                                    </td>
                                    <td class="center"><a href="{sh:$vo.logo}" target="_blank"><img src="{sh:$vo.logo}" width='30px;'></td>
                                    <td class="center">{sh:$vo.category_name}</td>
                                    <td class="center edit">
                                        <a val="{sh:$vo.store_id}" onclick="view(this);" class="view btn btn-success" href="javascript:void(0);" title="查看">
                                            <i class="halflings-icon white zoom-in"></i>
                                        </a>
                                    </td>
                                </tr>
复制代码

 

点击,触发up方法,down方法。

获取当前id。

通过jQuery,获取相邻的元素。

复制代码
// 上移
function up(obj){
    var $tr = $(obj).parents("tr");
    if ($tr.index() != 0) {
        var current_id   = $tr.attr('id');
        var exchange_id   = $tr.prev("tr").attr('id');
        $.ajax({
            url: '{sh::U("Mall/ajax","todo=exchange_sort")}',
            type: 'POST',
            data: 'current_id='+current_id+'&exchange_id='+exchange_id,
            success:function(json) {
                if (json == 1) {
                    $tr.fadeOut().fadeIn();
                    $tr.prev().before($tr);  
                    layer.msg('上移成功', {icon: 1});
                } else {
                    layer.msg('上移失败', {icon: 2});
                }
            }
        });
    }
}

// 下移
function down(obj) {
    var len = $(".down").length;
    var $tr = $(obj).parents("tr");
        if ($tr.index() != len - 1) { 
            var current_id   = $tr.attr('id');
            var exchange_id   = $tr.next("tr").attr('id');
            $.ajax({
                url: '{sh::U("Mall/ajax","todo=exchange_sort")}',
                type: 'POST',
                data: 'current_id='+current_id+'&exchange_id='+exchange_id,
                success:function(json) {
                    if (json == 1) {
                        $tr.fadeOut().fadeIn();
                        $tr.next().after($tr);  
                        layer.msg('下移成功', {icon: 1});
                    } else {
                        layer.msg('下移失败', {icon: 2});
                    }
                }
            });
    } 
}
复制代码

 

这里用到了几个jQuery方法,prev(),next(),before(),after()。以及效果,fadeOut(),fadeIn()。以及一些简单的逻辑判断和技巧。

php后台处理,

复制代码
case 'exchange_sort':
                $mallShopModel = M('Mall_shop');
                $current_id   = $this->_post('current_id','trim');
                $exchange_id   = $this->_post('exchange_id','trim');
                $current_sort = $mallShopModel->where(array('id'=>$exchange_id))->getField('sort');
                $exchange_sort = $mallShopModel->where(array('id'=>$current_id))->getField('sort');
                
                $cdata['id']   = $current_id;
                $cdata['sort'] = $current_sort;
                $cres          = $mallShopModel->save($cdata);
                $edata['id']   = $exchange_id;
                $edata['sort']   = $exchange_sort;
                $eres          = $mallShopModel->save($edata);
                if ($cres !== FALSE && $eres !== FALSE){
                    exit('1');
                } else {
                    exit('2');
                }


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
weex-过滤数组中的元素并进行删除
weex-过滤数组中的元素并进行删除
0 0
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
快速学习 jQuery_ 复制元素、DOM 插入到现有元素外
0 0
高效率去掉js数组中重复项
Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法: 1 function unique(arr) { 2 var result = [], isRepeated; 3 for (var i = 0, len = arr.
353 0
Slip.js – 在触摸屏上实现列表的滑动排序功能
  Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering)。Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件实现重新排序交互。
729 0
鼠标移到某一元素则在元素旁边出现弹出框(JQuery)
类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会弹出一个框,位置随位置的改变而改变,代码如下:  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
474 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载