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 相关文章推荐
JS中的数组的sort方法使用示例
Jan 22 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
生成二维码方法汇总
Dec 26 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
浅入深出Vue之自动化路由
Aug 06 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
JS快速实现简单计算器
Apr 08 Javascript
javascript数组includes、reduce的基本使用
Jul 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js实现数组转换成json
2015/06/26 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
原生js开发的日历插件
2017/02/04 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现八大排序算法
2016/08/13 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Django 重写用户模型的实现
2019/07/29 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技