jq 实现上下排序的一段代码
前台页面:
<div class="adddaren_box">
{%if isset($masterDetailsInfo)%}
<div class="adddaren_box1">
删除/修改达人列表
</div>
<input type="hidden" value="{%$masterDetailsInfo->getMasterId()%}" id="master_id">
<div class="adddaren_box2">
用户名
<input type="text" readOnly="true" value="{%$masterDetailsInfo->getUserName()%}" class="adddaren_box2_inp" />
</div>
<div class="adddaren_box3">
推荐理由
<input type="text" value="{%$masterDetailsInfo->getMasterInfo()%}" class="adddaren_box3_inp" />
</div>
<div class="adddaren_box4">
推荐时间
<input type="text" value="{%$masterDetailsInfo->getStartTime()%}" class="adddaren_box4_inp" />
</div>
<div class="adddaren_box5">
结束时间
<input type="text" value="{%$masterDetailsInfo->getEndTime()%}" class="adddaren_box5_inp" />
</div>
<div class="adddaren_box6">
<div class="adddaren_box6_sp1" id="modify">修改</div>
<div class="adddaren_box6_sp2" id="del">删除</div>
</div>
{%else%}
<div class="adddaren_box1">
添加达人列表
</div>
<div class="adddaren_box2">
用户名
<input type="text" value="" class="adddaren_box2_inp" />
</div>
<div class="adddaren_box3">
推荐理由
<input type="text" value="" class="adddaren_box3_inp" />
</div>
<div class="adddaren_box4">
推荐时间
<input type="text" value="" class="adddaren_box4_inp" />
</div>
<div class="adddaren_box5">
结束时间 <input type="text" value="" class="adddaren_box5_inp" /> </div> <div class="adddaren_box6"> <div class="adddaren_box6_sp1" id="add">添加</div> </div> {%/if%}</div>{%script%}require.async('huanzhe_houtai:widget/adddaren/adddaren',function(adddaren){adddaren.run();}){%/script%}
js:
exports.run = function(){ $(function(){
var pages = require('common:widget/page/page'); $(".addbanner").click(function(){
location.href="/huanzhe_houtai/ad_guanli";
});
//排序用
var i=$(this).parents().index();
$(document).on("click", '#prev', function master_order(){
var current_obj = $(this).parent().parent().eq(i);
//alert(current_obj.attr('class'));
if(current_obj.attr('class') == 'data_list_row'){
//alert(1);
var current_id = $(this).data("id");
var current_order = $(this).data("order"); var up = current_obj.prev().children('.edition_box3_sp6');
var prev = up.children('#prev'); var prev_id = prev.data("id");
var prev_order = prev.data("order");
//alert('当前id:'+current_id);
//alert('上一条id'+prev_id);
if(!prev_id){
alert('亲,已经置顶了哟!');
}else{
$(".loading").show();
if(parseInt(current_order) != parseInt(prev_order)) {
$.get("/index.php/master/order_master",
{current_id: current_id,current_order: current_order,swap_id: prev_id, swap_order: prev_order},
function (data) {
console.log(data);
var cur = current_obj.children('.edition_box3_sp6').children('#prev');
var cur_next = current_obj.children('.edition_box3_sp6').children('#next'); cur.data({"order":prev_order});
cur_next.data({"order":prev_order}); prev.data({"order":current_order});
up.children('#next').data({"order":current_order});
current_obj.prev().before(current_obj);
$(".loading").hide();
},'html');
} }
}
}); $(document).on("click", '#next', function master_order(){
var current_obj = $(this).parent().parent().eq(i); //alert(current_obj.attr('class')); if(current_obj.attr('class') == 'data_list_row'){ //alert(1); var current_id = $(this).data("id"); var current_order = $(this).data("order"); var down = current_obj.next().children('.edition_box3_sp6'); var next = down.children('#next'); var next_id = next.data("id"); var next_order = next.data("order"); if(!next_id){ alert('亲,已经到底了!'); }else{ $(".loading").show(); if(parseInt(current_order) != parseInt(next_order)) { $.get("/index.php/master/order_master", {current_id: current_id,current_order: current_order,swap_id: next_id, swap_order: next_order}, function (data) { console.log(data); var cur = current_obj.children('.edition_box3_sp6').children('#prev'); var cur_next = current_obj.children('.edition_box3_sp6').children('#next'); cur.data({"order":next_order}); cur_next.data({"order":next_order}); // alert(next_order); next.data({"order":current_order}); down.children('#prev').data({"order":current_order}); //alert(current_order); current_obj.next().after(current_obj); $(".loading").hide(); },'html'); } } } }); //这里是分页用的 pages.setCallback(function(page,page_size) { $(".loading").show(); console.log(page+','+page_size); //var param = $('.notice_param').val(); $.get("/index.php/master/load_master_page_list",{"page":page,"page_size":page_size},function(data){ console.log(data); //$(".InitPHP_pages").replaceWith(data); //$(data).replaceAll('.edition_box3'); $(".InitPHP_pages").remove(); $(".edition_box3").remove(); $(".edition_box2").after(data); $(".loading").hide(); },'html'); }); });};
jq 实现上下排序的一段代码的更多相关文章
- 由一段代码谈前端js优化和编码规范(一) 分类: JavaScript 2015-03-21 12:43 668人阅读 评论(1) 收藏
这段代码是撸主刚毕业那会写的,主要是实现一个左侧的导航条的折叠功能.当时实现的比较简陋,每次在导航条增加新的项目的时候,都要手动去修改js代码中写死的索引...确实是比较恼火的,后来就修改了一下,能够 ...
- C语言归并排序(合并排序)算法及代码
归并排序也称合并排序,其算法思想是将待排序序列分为两部分,依次对分得的两个部分再次使用归并排序,之后再对其进行合并.仅从算法思想上了解归并排序会觉得很抽象,接下来就以对序列A[0], A[l]…, A ...
- springboot工程启动即执行一段代码
最近在做一个项目, 需要Tomcat启动后就执行一段代码 在这里需要用到CommandLineRunner这个接口, Spring boot的CommandLineRunner接口主要用于实现在应用初 ...
- VBA_50段代码总结
'' 30个有用的VBA代码 '目录: '1--合理使用数组:'2--一次保存并关闭所 ...
- 评《撸一段 SQL ? 还是撸一段代码? 》
最近看到一篇博客<撸一段 SQL ? 还是撸一段代码?>,文章举例说明了一个连表查询使用程序code来写可读性可维护性更好,但是回帖意见不一致,我想作者在理论层面没有做出更好的论述,而我今 ...
- Unity 延迟执行一段代码的较为优雅的方式
在Unity中,延时执行一段代码或者一个方法或者几个方法的情况非常普遍. 一般会用到Invoke和InvokeRepeating方法.顾名思义,第一个是执行一次,第二个是重复执行. 看下定义: voi ...
- μC/OS-Ⅲ中的临界段代码
临界段代码(critical sections),也叫临界区(critical region),是指那些必须完整连续运行,不可被打断的代码段.μC/OS-Ⅲ系统中存在大量临界段代码.采用两种方式对临界 ...
- JavaScript-navigator_userAgent-编写一段代码能够区分浏览器的主流和区分
1 userAgent:包含浏览器名称和版本号的字符串 <!DOCTYPE html> <html> <head lang="en"> < ...
- Python实现装饰模式的一段代码
# 实现装饰模式的一段代码 import functools def log(func): @functools.wraps(func) def wrapper(*args,**kw): print( ...
随机推荐
- JAVA用途
在现今阶段,最有前途的开发语言当属Java,Java语言是跨平台的,Write Once,Run Anywhere是Java的一句口号,学Application编程,可以在计算机上写程序,学Apple ...
- MATLAB绘图
matlab绘制散点图 clc,clear x=[11.9,11.5,14.5,15.2,15.9,16.3,14.6,12.9,15.8,14.1]; y=[196.84,196.84,197.14 ...
- [LeeCode]Power of Two
Given an integer, write a function to determine if it is a power of two. My initial code: class Solu ...
- java 建造者模式
package de.bvb.test3; /** * 建造者模式: 假如一个类有4个字段,每个字段或者每几个字段的组合都需要设置为构造函数,构造函数就比较麻烦 * 而且如果再加一个字段进去也不好拓展 ...
- poj3253 Fence Repair
http://poj.org/problem?id=3253 Farmer John wants to repair a small length of the fence around the pa ...
- 如何结合自己本地数据库,使用【百度地图】API
如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...
- myaudio.duration为null的解决办法
放在 myaudio.addEventListener("canplay",function(){});中,就可以获取到值.
- Struts框架2ActionError类 内部资料 请勿转载 谢谢合作
ActionError类从不独立进行错误处理,它们总是被存储在ActionErrors对象中.ActionErrors对象保存ActionError类的集合以及它们特定的属性值,我们可以使用自己定义的 ...
- 传感器之超声波测距HC-SR04
一.前言 HC-SR04超声波测距模块可提供2cm-400cm的非接触式距离感测功能,测距精度可达高到3mm:模块包括超声波发射器.接收器与控制电路.像智能小车的测距以及转向,或是一些项目中,常常会用 ...
- javascript中怎样区分元素和节点?
1.所谓元素,即html文档里面,所有的标签都可以称之为元素,比如说<p>.<tr>等,也就是说元素是个统称,一个文档里面有很多的元素.2.所谓节点,是js为了对html文档进 ...