排序功能实现 jQuery实现排序上移下移-白红宇

效果

思路，

跟相邻元素，互换sort。

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

                                                                                                                                                                                                                                                                              {sh:$vo.store_name}                                                                                                            {sh:$vo.category_name}

点击，触发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');                }