jquery Nestable 获取改变排序后的json数据 拖动排序
<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数据 拖动排序的更多相关文章
- jQuery获取一般处理程序(ashx)的JSON数据
昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据
ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关 新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({ t ...
- Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 原理and实现
Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 1. 应用场景 1 2. 随机抽取数据原理 1 3. 常用的实现方法:::数据库随机函数 1 4. Mssq ...
- 为什么?为什么?Java处理排序后的数组比没有排序的快?想过没有?
先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个有颜值却假装靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题 ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{fi ...
- javascript应用:页面解析list和map封装后的json数据
开发web项目时,经常会使用到的页面脚本语言javascript,使用它能让页面展示上的效果更多彩. 今天就来说一下,从数据库中获取到数据后在页面上的展示方式: 1.数据库取出数据放入list< ...
- 如何使用jQuery向asp.net Mvc传递复杂json数据
jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验! 调用jQuery的ajax方法时 ...
随机推荐
- eclipce连接数据库增删改查
1.在mysql中新建一个名为course的数据库,并在其中新建一个course数据表,包含四个字段,id,name,teacher,classname如图(注意:将id设为自动递增,否则后面新增会出 ...
- webpack-manifest-plugin
[webpack-manifest-plugin] Webpack plugin for generating an asset manifest. This will generate a mani ...
- Java 面向切面 AOP
参考: :http://www.blogjava.net/supercrsky/articles/174368.html AOP: Aspect Oriented Programming 即面向切面编 ...
- jQuery权威指南(第2版) 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- jxls2 java.lang.NegativeArraySizeException
某个单元格使用jx:each报这个错误. 内部代码,创建一个二维数组时,传了一个负值进去 解决办法 将这个单元格删除,重新编写批注
- flash as3.0 截图保存图片
import flash.display.MovieClip; import flash.events.MouseEvent; import flash.filesystem.*; ///////// ...
- AttributeError: 'dict' object has no attribute 'iteritems'
在python3.6中运行 sortedClassCount = sorted(classCount.iteritems(), key=operator.itemgetter(1), reverse= ...
- 牛客网练习赛43-C(图论)
题目链接:https://ac.nowcoder.com/acm/contest/548/C 题意:有n个知识点,学会每个知识点花T[i],已经学会了其中k个知识点,有m组关系,t1,t2,t3,表示 ...
- nodemcu生成LUA版本固件
构建自己的固件地址 https://nodemcu-build.com/
- ActiveMQ之java Api
ActiveMQ 安全机制 activemq的web管理界面:http://127.0.0.1:8161/admin activemq管控台使用jetty部署,所以需要修改密码则需要修改相应的配置文件 ...