<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. numpy中的数学

    1.dot,exp v = np.dot(arg1,arg2) #矩阵乘法 v2 = np.exp() # e的-x 次方

  2. ES5新增数组方法every()、some()、filter()、map()

    JavaScript ES5标准中新增了一些Array方法,如every().some().filter().map().它们的出现使我们能够更加便利地操作数组,但对IE9以下浏览器的兼容性比较差.下 ...

  3. reids 基本操作

    redis 基本操作 1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dic ...

  4. Hibernate一对多单向关联和双向关联映射方法及其优缺点 (待续)

    一对多关联映射和多对一关联映射实现的基本原理都是一样的,既是在多的一端加入一个外键指向一的一端外键,而主要的区别就是维护端不同.它们的区别在于维护的关系不同: 一对多关联映射是指在加载一的一端数据的同 ...

  5. Java获得数据库查询结果的列数和行数,打印查询结果

    Java连接数据库及简单操作见我以前的一篇随笔:http://www.cnblogs.com/meitian/p/5036332.html   一.获取查询结果的行数和列数 查询结果为ResultSe ...

  6. PHP伪原创同义词替代代码示意

    PHP伪原创同义词替代代码示意很多网站后台都是支持PHP,虽然用同义词百度能够识别,但至少比原封不动好些,没有AI原创NLP原创度高,但也有一定的效果.下面就是PHP代码实例: <?phpreq ...

  7. cloudera cdh5.13.0 vmware 快速安装

    1. 从官网上载VMWARE VM快速安装包 https://www.cloudera.com/downloads/quickstart_vms/5-12.html 2. 下载后的安装包,解压之后得到 ...

  8. CentOS ln 链接

    ln -s /u01/app/oracle/product/11.2.0/dbhome_1/bin/sqlplus/ /usr/bin (解决bash: sqlplus: command not fo ...

  9. Python+Selenium学习--操作测试对象

    场景 前面已经讲解了如果定位对象,定位之后需要对这个对象进行操作.是鼠标点击还是键盘输入,取决于我们定位的对象缩支持的操作. webdriver中比较常用的操作元素的方法有下面几个: clear    ...

  10. js 计算丢失精度问题

    计算时用parseFloat,计算完后转换成Number对象 var ytje = parseFloat("0.03"); var handlecharge = parseFloa ...