zTree拖拽改变菜单顺序,并且调用后台方法改变数据库中的排序

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

1.初始化zTree(异步加载结点进来时,后台返回来的数据按order字段进行顺序排序)

//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);
	});

2.拖拽结束的回调方法

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);		
		}
	}

3.后台方法示例

//zTree拖动改变同级节点顺序
	@AjaxRpcMethod
	public void changeSourceOrder(List idList){
		for(int i=0;i

 

你可能感兴趣的:(java,后端)