zoukankan      html  css  js  c++  java
  • 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;
            }
        }
    

      

  • 相关阅读:
    北京南天软件工资条解决方案
    MongoDB的增删查改基本操作
    MongoDB的基本概念
    MAC上mongodb连接不上
    Windows和Mac上NodeJS和Express的安装
    jquery筛选数组之grep、each、inArray、map的用法及遍历son对象(转)
    JavaScript中Function的拓展
    苹果电脑的快捷键介绍
    Emmet:HTML/CSS代码快速编写神器
    logstash实战tcp插件
  • 原文地址:https://www.cnblogs.com/already/p/6378161.html
Copyright © 2011-2022 走看看