jquery Nestable 获取改变排序后的json数据 拖动排序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 数据,传递给后台,进行数据排序处理。
以下为我的操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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; } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee