jquery Nestable 获取改变排序后的json数据 拖动排序

时间:2020-12-03 23:40:06
<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获取一般处理程序&lpar;ashx&rpar;的JSON数据

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

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

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

  3. 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取&dollar;&period;ajax&lpar;&rpar;方法发送的json数据

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

  4. Atitit&period;并发测试解决方案&lpar;2&rpar; -----获取随机数据库记录 随机抽取数据 随机排序 原理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&period;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&period;net Mvc传递复杂json数据

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

随机推荐

  1. UIKit框架之UIEvent

    1.继承链:NSObject 2.事件大致可以分为三种事件:触摸事件.动作事件.遥控事件 3.获取事件的touches (1)- (NSSet<UITouch *> *)allTouche ...

  2. js 获取系统时间

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HDU 4465 数值计算,避免溢出

    数学,数值计算,求期望 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4465题目描述:有两个盒子,每个中有n个糖果,(n<10^5)每次任选一 ...

  4. ps颜色模式

    HSB(hue.saturation.bright)  基于人眼 RGB 基于光 CMYK 基于色 LAB 基于大自然颜色库(理论)

  5. 《使用wxWidgets进行跨平台程序开发》chap02——一个简单的应用程序

    // Name: minimal.cpp // Purpose: Minimal wxWidgets sample // Author: Julian Smart #include "wx/ ...

  6. 用NMAKE创建VS2012 C&plus;&plus;工程 HelloWorld

    由于需要精通GDAL的源代码,所以还是有必要精通NMAKE,先来尝试创建一个NMAKE工程. 之前一篇文章Windows7中Emacs 24 shell使用Gitbash已经介绍了如何在Emacs的s ...

  7. JSP page指令

    JSP page指令: JSP文件: <%@ page language="java"%> <%@ page import="java.util.*&q ...

  8. 利用Jsoup包爬取网站内容

    一 Jsoup包 下载链接:http://download.csdn.net/detail/u014000832/7994245 二 爬取搜狐新闻网站标题等内容 package com.test1; ...

  9. 保存退出vi编辑

    保存命令按i进入编辑模式,编辑完成按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出v ...

  10. 转载:MongoDB之旅&lpar;超赞,适合初学者&rpar;

    MongoDB是目前工作中经常使用到的NoSQL数据库. 本博客只记录相关理论知识和技巧,涉及到实践的部分都会单开Blog来记录实践过程. ------------------------------ ...