【菜单权限拖拽改变菜单顺序---zTree】

最新推荐文章于 2023-02-10 15:04:05 发布

喬峯焘

最新推荐文章于 2023-02-10 15:04:05 发布

阅读量439

点赞数 1

分类专栏： zTree 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43279841/article/details/123925825

版权

zTree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：在zTree中，同一级的菜单可以拖拽调换顺序并且在后台实现更新排序；不是同一级的菜单亦可以随意拖拽，但是不调用后台方法进行真实顺序的更新，即页面上看见拖拽成功，但是页面重新刷新后变回默认排序。

初始化

	var group_setting = {
			data : {
				simpleData :{
					enable :true,
					idKey : "id",
					pIdKey : "parentId" 
				}
				
			},
			async : {
				enable : true,
				url : group_url, 
				autoParam : ["id","name"]
			},
			
			view : {
				expandSpeed:"",
				addHoverDom : addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false		
			},
				edit : {
					enable : true, //必须为true才可以开启拖拽
   					drag: { //拖拽参数设置
   						autoExpandTrigger : false,
   						isMove : true, //可拖拽
   						isCopy : false //关闭掉拖拽复制
   					}
				},
				callback : { //回调函数  
   					onDrop : zTreeOnDrop//拖拽结束后回调方法
		        } 
		};
		var $tree = $("#myTree");
		$.fn.zTree.init($tree, group_setting, zNodes);
	});

回调方法

function zTreeOnDrop(event, treeId,treeNodes,targetNode,moveType){
		//targetNode为null时，即进行了拖拽行为，但是没有改变排序
        if(targetNode==null) return;
		var $thisParentId;
        $thisParentId = treeNodes[0].parentId;
		var $targetParentId;
		$targetParentId = targetNode.parentId;
        //判断是否为同级移动，即是否在同一级目录下拖拽
		if($thisParentId==$targetParentId){
			var tpNode = targetNode.getParentNode();
			var nodes = tpNode.children;
            //遍历拖拽后的该级所有结点，拼成一个id数组
			var idArray = new Array()
			for (var i=0, l=nodes.length; i < l; i++) 
			{
				idArray[i]=nodes[i].id;
			}
            //调用自己的ajax后台方法
			mySourceService.changeSourceOrder(idArray);		
		}
	}

后台

//zTree拖动改变同级节点顺序
	@AjaxRpcMethod
	public void changeSourceOrder(List<Integer> idList){
		for(int i=0;i<idList.size();i++){
			LibSort s = libSortManager.load(idList.get(i));
			s.setOrder(i);
			libSortManager.save(s);
		}
	}