排序功能实现 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实现排序 上移 下移的更多相关文章
- jquery 行交换 上移 下移
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Yii 2.0排序功能的使用
在Yii2.0项目的实际开发中,经常会遇到使用Yii2.0自带的排序功能.下面是排序功能的具体使用方法. 一.设置排序规则 注意引入Sort类,如:use yii\data\Sort; // 设置排序 ...
- 用Jquery控制元素的上下移动 实现排序功能
在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...
- jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
- php修改排序,上移下移
php修改排序,上移下移 /** $UpDown //移动方向,up或down $table //表名 $id //当前移动的ID $id_col //ID字段的名称 $ ...
- vue 实现模块上移下移 实现排序
效果图 上移 下移 首先想到的是 数组的相互替换嘛 <template> <div> <div class="box" v-for="(it ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本模块管理界面新增模块排序功能
模块(菜单)的排序是每个系统都必须要有的功能,我们框架模块的排序在业务逻辑中已经体现. WinForm版本可以直接在界面上对模块进行排序以控制模块展示的顺序.Web版本在3.2版本中也新增了直接可以模 ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- 通过Folx的排序功能来设置下载任务的优先级
当我们使用Folx进行多任务下载时,突然遇到要下载一个紧急文件的情况,该如何让这个紧急文件的下载任务排在优先的位置?当然,用户也可以先暂停所有的下载任务,仅开启紧急文件的下载任务. 但这种方式需要用户 ...
随机推荐
- 错误 是否保存对以下各项的更改 devenv.sin
描述: 打开VS2012项目时,提示 是否保存对以下各项的更改 devenv.sin google了一下,没找到...纠结.百度了一下,竟然有的...擦一直以为google很给力,看来对于中文的解析不 ...
- 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- HDU 2639 Bone Collector II(01背包变型)
此题就是在01背包问题的基础上求所能获得的第K大的价值. 详细做法是加一维去推当前背包容量第0到K个价值,而这些价值则是由dp[j-w[ i ] ][0到k]和dp[ j ][0到k]得到的,事实上就 ...
- JAVA - hashcode与equals作用、关系
Hashcode的作用 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set.前者集合内的元素是有序的,元素可以重复:后者元素无序,但元素不可重复. ...
- git 更换远程仓库地址
1. 更改软件仓库指向.在github改了用户名和仓库名称后,仓库地址也相应的发生的变化,这时候就需要更新本地仓库以指向新的远程仓库地址: $git remote set-url origin git ...
- Collections.unmodifiableList()的使用与场景
在<重构——改善既有代码的设计>一书中,有一种重构手法叫Encapsulate Collection(封装集群),为了演示该重构手法,我写了四个类,通过对比重构前后的代码,加深对这一重构手 ...
- C# Html网页生成图片解决方案1
1.使用System.Windows.Forms命名空间下的WebBrowser控件加载网页并生成图片 GiHub参考地址: https://github.com/tianma3798/FileOpa ...
- 历史执行Sql语句性能分析 CPU资源占用时间分析
SELECT HIGHEST_CPU_QUERIES.PLAN_HANDLE, HIGHEST_CPU_QUERIES.TOTAL_WORKER_TIME, Q.DBID, ...
- Android中滑动关闭Activity
继承SwipeBackActivity即可实现向右滑动删除Activity效果 点击下载所需文件
- 商务智能(BI)技术
以下内容仅为兴趣爱好. 商务智能技术是将数据仓库.联机分析处理(OLAP)和数据挖掘等结合起来应用到商业活动中,从不同的数据源收集数据,经过抽取(Extract).转换(Transform)和加载(L ...