<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. springboot-day01-引入如何读取配置文件以及helloWorld

    前言:该文章是紧接上一篇文章http://www.cnblogs.com/newAndHui/p/8058527.html 3.3. 实战 3.3.1.读取外部的资源配置文件 通过@PropertyS ...

  2. java.lang.NoClassDefFoundError: net.tsz.afinal.FinalHttp

    java.lang.NoClassDefFoundError: net.tsz.afinal.FinalHttpat com.hbjyjt.oa.utils.i.<init>(HttpRe ...

  3. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  4. webpack config

    [webpack config] 1.entry Simple rule: one entry point per HTML page. SPA: one entry point, MPA: mult ...

  5. web漏洞详解及修复建议

    1.漏洞描述 跨站脚本攻击(Cross-site scripting,通常简称为XSS)发生在客户端,可被用于进行窃取隐私.钓鱼欺骗.偷取密码.传播恶意代码等攻击行为. 恶意的攻击者将对客户端有危害的 ...

  6. vmware 完全关闭时间同步

    参考 http://blog.51cto.com/hezhang/1535577 修改.vmx文件 tools.syncTime = "FALSE" time.synchroniz ...

  7. pta l2-14(列车调度)

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063166312448 题意:给定n个数的重排列,求至少需 ...

  8. 源码调用ffmpeg库时,需要注意接口为C接口

    即引用相关头文件时候,要使用extern "C"{}来包含. 关于extern "C"{}的详情,参考:http://www.cnblogs.com/skyne ...

  9. c语言的基础知识

    break只对应for循环,while循环,switch case分支. (a>b)?y:n    如果A大于B,那么选择Y的结果,如果A小于B,那么选择N的结果. ^在c语言中代表的是按位异或 ...

  10. 【网络编程三】网络通信之多进程(线程)实现TCP通信(一)

    [多进程] [多线程] /************************************************************************* > File sum ...