<script type="text/javascript">
jQuery(function($){
$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
e.stopPropagation();
});
$('[data-rel="tooltip"]').tooltip();
$('#nestable').nestable().on('change', function(){
var r = $('.dd').nestable('serialize');
$("#xx").html(JSON.stringify(r)); //改变排序之后的数据
});
$('#nestable').nestable().on('change', updateOutput);
});
</script>

  以上代码用来获取操作后的json 数据,传递给后台,进行数据排序处理。

以下为我的操作:

<script type="text/javascript">
jQuery(function($){
var courseID = '{$course_id}';
$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
e.stopPropagation();
});
$('[data-rel="tooltip"]').tooltip();
$('#nestable').nestable().on('change', function(){
var r = $('.dd').nestable('serialize'); console.log(11);
console.log(JSON.stringify(r));
$.ajax({
type: 'POST',
url: "__URL__/updateSort",
data: {jsonData:JSON.stringify(r),courseId:courseID},
success:function(result){
//console.log(result);
window.location.reload();
}});
$("#xx").html(JSON.stringify(r)); //改变排序之后的数据
});
$('#nestable').nestable().on('change', updateOutput);
});
</script>

  

    public function updateSort(){
//$data = '[{"id":605,"children":[{"id":4093},{"id":4095},{"id":4094},{"id":4096},{"id":4097},{"id":4098},{"id":4099},{"id":4100},{"id":4101},{"id":4102},{"id":4103},{"id":4104},{"id":4105},{"id":4106},{"id":4107},{"id":4108},{"id":4109},{"id":4110},{"id":4111},{"id":4112}]}]';
$data = $_POST['jsonData'];
//$data = '[{"id":553,"children":[{"id":3769},{"id":3768},{"id":3770},{"id":3771},{"id":3772},{"id":3773},{"id":3774},{"id":3775},{"id":3776},{"id":3777},{"id":3778}]}]';
$data = json_decode($data);
//var_dump($data);
$courseId = $_POST['courseId'];
//$courseId = 343;
$chapterId = $data[0]->id;
//$chapterId = 553;
$childrenData = $data[0]->children; try{
foreach($childrenData as $key=>$item){
echo $item->id."--".$key."<br/>";
M('CourseChapterSection')->where(array('course_id'=>$courseId,'chapter_id'=>$chapterId,'section_id'=>$item->id))->data(array('s_sort'=>$key))->save();
}
echo 1;
}catch(\Exception $e){
echo 0;
}
}

  

jquery Nestable 获取改变排序后的json数据 拖动排序的更多相关文章

  1. jQuery获取一般处理程序(ashx)的JSON数据

    昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...

  2. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  3. 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据

    ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关     新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({  t ...

  4. Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 原理and实现

    Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 1. 应用场景 1 2. 随机抽取数据原理 1 3. 常用的实现方法:::数据库随机函数 1 4. Mssq ...

  5. 为什么?为什么?Java处理排序后的数组比没有排序的快?想过没有?

    先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个有颜值却假装靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题 ...

  6. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  7. 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{fi ...

  8. javascript应用:页面解析list和map封装后的json数据

    开发web项目时,经常会使用到的页面脚本语言javascript,使用它能让页面展示上的效果更多彩. 今天就来说一下,从数据库中获取到数据后在页面上的展示方式: 1.数据库取出数据放入list< ...

  9. 如何使用jQuery向asp.net Mvc传递复杂json数据

    jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验! 调用jQuery的ajax方法时 ...

随机推荐

  1. 初探Mybaties整合分页插件PageHelper(1)

    Mybaites整合分页PageHelper插件 在数据进行分页,通过sql语句,mysql分页,table_name表名,pageNum 第几页,pageSize 每页数据条数: SELECT * ...

  2. Numpy:索引与切片

    numpy基本的索引和切片 import numpy as np arr = np.array([1,2,3,555,666,888,10]) arr array([ 1, 2, 3, 555, 66 ...

  3. ORA-01555 snapshot too old

    假设有一张6000万行数据的testdb表,预计testdb全表扫描1次需要2个小时,参考过程如下: 1.在1点钟,用户A发出了select * from testdb;此时不管将来testdb怎么变 ...

  4. cetnos 7 增加新的硬盘

    fdisk -l 查看新的硬盘是否挂载 如没有挂载 ls /sys/class/scsi_host/ 查看设备列表 echo "- - - " > /sys/class/sc ...

  5. 数论----gcd和lcm

    gcd即最大公约数,lcm即最小公倍数. 首先给出a×b=gcd×lcm 证明:令gcd(a,b)=k,a=xk,b=yk,则a×b=x*y*k*k,而lcm=x*y*k,所以a*b=gcd*lcm. ...

  6. SecureCRT 上传下载

    1.菜单栏Options-Session Options-SFTP Session 设置上传/下载目录 2.选择File-Connect SFTP Session进入SFTP窗口 3.命令 ls pw ...

  7. POJ 1684 Corn Fields(状压dp)

    描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ≤ ...

  8. AVAudioSession应用指南

    转coco-LG audiosession负责调节你的app和ios系统里的音频行为.一旦加载了audiosession你可以获得一个audiosession的单例.你可以配置这个audiosessi ...

  9. Springboot学习03-SpringMVC自动配置

    Springboot学习03-SpringMVC自动配置 前言 在SpringBoot官网对于SpringMVCde 自动配置介绍 1-原文介绍如下: Spring MVC Auto-configur ...

  10. SQL2008用sql语句给字段添加说明

    EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'字段说明文字' , @level0type=N'SCHEMA',@l ...