排序功能实现 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');
                }
复制代码
相关文章
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
212 0
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
289 2
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
289 5
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
289 0
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
212 0
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
231 0
jQuery点击图片来回切换功能
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
413 0
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
179 0