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的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
Yii扩展组件编写方法实例分析
2015/06/29 PHP
jQuery之过滤元素操作小结
2013/11/30 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python数据结构之翻转链表
2017/02/25 Python
详解python中requirements.txt的一切
2017/03/03 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
尽职尽责村干部自我鉴定
2014/01/23 职场文书
单位承诺书格式
2014/05/21 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
地理科学专业自荐信
2014/09/01 职场文书