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<Integer> idList){
		for(int i=0;i<idList.size();i++){
			LibSort s = libSortManager.load(idList.get(i));
			s.setOrder(i);
			libSortManager.save(s);
		}
	}

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MrZhouGx

觉得对你有用的话可以支持一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值