排序功能实现 jQuery实现排序上移下移-阿里云开发者社区

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

2017-10-01 851

版权

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

简介：

效果

思路，

跟相邻元素，互换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');
                }