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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
js跳转页面方法总结
Jan 29 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
新手如何快速理解js异步编程
Jun 24 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和MySQL保存和输出图片
2006/10/09 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php Calender(日历)代码分享
2014/01/03 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python生成随机图形验证码详解
2017/11/08 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python线程信号量semaphore使用解析
2019/11/30 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
建材业务员岗位职责
2013/12/08 职场文书
小学生秋游活动方案
2014/02/23 职场文书
体育活动总结范文
2014/05/04 职场文书
绿色校园广播稿
2014/10/13 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js