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 IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术