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实现浏览器的title闪烁
Jul 08 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
js实现中文实时时钟
Jan 15 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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
给多个地址发邮件的类
2006/10/09 PHP
php数据库抽象层 PDO
2011/05/07 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python logging日志模块原理及操作解析
2019/10/12 Python
python3.7调试的实例方法
2020/07/21 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
自我鉴定总结
2014/03/24 职场文书
个人评语大全
2014/05/04 职场文书
一年级小学生评语大全
2014/12/25 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Python编写冷笑话生成器
2022/04/20 Python
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers