jQuery基于排序功能实现上移、下移的方法


Posted in Javascript onNovember 26, 2016

本文实例讲述了jQuery基于排序功能实现上移、下移的方法。分享给大家供大家参考,具体如下:

效果

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>
      
    <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');
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
理解AngularJs指令
Dec 10 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
angular多语言配置详解
May 16 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
node.js中的事件处理机制详解
Nov 26 #Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 #Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 #Javascript
JS基于递归实现倒计时效果的方法
Nov 26 #Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 #Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 #Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 #Javascript
You might like
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python中的with...as用法介绍
2015/05/28 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
综合办公室主任职责
2013/12/16 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
初中作文评语集锦
2014/12/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android