Ztree初涉-节点同级拖拽及跨级拖拽(移动到目标节点前/后/下),并将结果插入数据库

ztree配置:

js  主要拖拽部分在标红处:

var fromChangeStatus=false;//form表单是否修改过
//ztree设置
var setting={
		view : {
			dblClickExpand : false, //设置双击展开
			expandSpeed: "",//zTree 节点展开、折叠时的动画速度:("slow", "normal", or "fast",""为不显示)
			fontCss : {color:"black"},//个性化文字样式
			selectedMulti: false,//设置是否允许同时选中多个节点
			showIcon: true,//设置 zTree 是否显示节点的图标
			showLine: true,//设置 zTree 是否显示节点之间的连线
			showTitle: false,//设置 zTree 是否显示节点的 title 提示信息
			txtSelectedEnable: true,//设置 zTree 是否允许可以选择 zTree DOM 内的文本
			addHoverDom: addHoverDom,//用于在节点上固定显示用户自定义控件
			removeHoverDom: removeHoverDom//用于在节点上固定隐藏用户自定义控件
		},
		data : {
			simpleData : {
				enable : true,//将list强行转换为复杂的 json嵌套格式,也就是父子节点关系
				idKey : "id",
				pIdKey : "pId"
			},
			key: {
				name: "name"
			}
		},
		check:{
			enable: false,//设置 zTree 的节点上是否显示 checkbox或者 radio
			chkStyle: "checkbox",//勾选框类型(checkbox 或 radio）
			autoCheckTrigger: false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数
			chkboxType: { "Y": "", "N": "ps" }//勾选 checkbox 对于父子节点的关联关系,Y 属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。
		},
		callback:{
			beforeClick:zTreeBeforeClick,//点击节点
			beforeRename: beforeRename,
			beforeEditName: beforeEditName,
			beforeRemove: beforeRemove,
			onRemove: onRemove,
			beforeDrag:zTreeBeforeDrag,//拖拽验证
			beforeDrop:zTreeBeforeDrop,//拖拽
			//onDrop:zTreeOnDrop//拖拽结束后的操作
//			beforeExpand: beforeExpand
		},
		edit:{
			enable:true,//是否允许拖拽,修改
			editNameSelectAll:false,//input 初次显示时,设置 txt 内容是否为全选状态
			removeTitle:"删除节点",//设置鼠标移动到 删除按钮 上时，浏览器自动弹出的辅助信息内容
			renameTitle:"重新命名",//设置鼠标移动到 编辑名称按钮 上时，浏览器自动弹出的辅助信息内容
			showRemoveBtn:true,//设置是否显示删除按钮
			showRenameBtn:true,//设置是否显示重新命名按钮
			drag:{
				isCopy:false,
				isMove:true,
				prev:canPrev,
				next:true,
				inner:true
			}
		}
}
$(function(){
	loadTree();
	$("#attrForm").change(function() {
		$("#attrForm").data("changed",true);
		fromChangeStatus=true;
   });
	
   //回车事件
   $('#searchValue').keydown(function(e) {  
       if (e.keyCode == 13) {  
    	   search();
       }  
   });
   initValidation();
});




//初始化加载zTree
function loadTree() {
	$().hisAjax(basePath + "/systemTreeClass/specialAjax/loadAllTreeNode.action?stringMap.treeTypeCode="+$('#treeTypeCode').val(), {
	}, {},
	        function (data) {
				zTreeNodes=data.nodes;
				for(var i = 0;i < zTreeNodes.length;i ++){
					if(!zTreeNodes[i].pId){
						zTreeNodes[i].drag=false;//顶级节点禁止拖拽
					}
				}
	        });
	$.fn.zTree.init($("#treeDemo"), setting,zTreeNodes);
}


//查询
function search(){
	var searchVal = $('#searchValue').val();
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	var nodeObj = treeObj.getNodeByParam("name", searchVal, null);
	if(nodeObj){
		//关闭所有节点
		treeObj.expandAll(false);
		//选中节点
		treeObj.selectNode(nodeObj);
		zTreeBeforeClick(nodeObj.id,nodeObj,1);
	}else{
		return alert('没找到数据！');
	}
}


function addHoverDom(treeId, treeNode) {
	var newCount = 1;
	if(treeNode.children){
		newCount = treeNode.children.length+1;
	}
	var sObj = $("#" + treeNode.tId + "_span");
	if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
	var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
		+ "' title='新增节点' οnfοcus='this.blur();'></span>";
	sObj.after(addStr);
	var btn = $("#addBtn_"+treeNode.tId);
	if (btn) btn.bind("click", function(){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var nodeParm={"stringMap.parentNodeId":treeNode.id,"stringMap.newCount":newCount,"stringMap.id":treeNode.id};
		//添加节点
		$().hisAjax(basePath + "/systemTreeClass/specialAjax/addTreeNode.action", nodeParm, {},function (data) {
			if(data.id!=null&&data.id!=''){
				zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:"新增节点" + (newCount++)});
			}
	    });
		return false;
	});
};
function removeHoverDom(treeId, treeNode) {
	$("#addBtn_"+treeNode.tId).unbind().remove();
};


//单击节点之前的事件回调函数,用于查询右侧各项属性
function zTreeBeforeClick(treeId, treeNode, clickFlag){
	$().hisAjax(basePath + "/systemTreeClass/specialAjax/queryAttrById.action", {"stringMap.id":treeNode.id}, {},function (data) {
		if(data.DictTreeClassSystemVo){
			var vo = data.DictTreeClassSystemVo;
			$('input:[name="dictTreeClassSystemVo.id"]').val(vo.id);
			$('input:[name="dictTreeClassSystemVo.parentNodeId"]').val(vo.parentNodeId);
			$('input:[name="dictTreeClassSystemVo.nodeCode"]').val(vo.nodeCode);
			$('input:[name="dictTreeClassSystemVo.nodeName"]').val(vo.nodeName);
			$('input:[name="dictTreeClassSystemVo.pinyin"]').val(vo.pinyin);
			$('input:[name="dictTreeClassSystemVo.queryCode"]').val(vo.queryCode);
			$('input:[name="dictTreeClassSystemVo.treeTypeCode"]').val(vo.treeTypeCode);
			$('input:[name="dictTreeClassSystemVo.treeTypeName"]').val(vo.treeTypeName);
			$('input:[name="dictTreeClassSystemVo.nodeAttr1"]').val(vo.nodeAttr1);
			$('input:[name="dictTreeClassSystemVo.nodeAttr2"]').val(vo.nodeAttr2);
			$('input:[name="dictTreeClassSystemVo.nodeAttr3"]').val(vo.nodeAttr3);
			$('input:[name="dictTreeClassSystemVo.nodeAttr4"]').val(vo.nodeAttr4);
			$('input:[name="dictTreeClassSystemVo.nodeAttr5"]').val(vo.nodeAttr5);
			$('input:[name="dictTreeClassSystemVo.nodeAttr6"]').val(vo.nodeAttr6);
			$('input:[name="dictTreeClassSystemVo.nodeAttr7"]').val(vo.nodeAttr7);
			$('input:[name="dictTreeClassSystemVo.nodeAttr8"]').val(vo.nodeAttr8);
		}else{
			$(':input','#attrForm').val('');
		}
		$("#attrForm")._reset();//清空验证提示
    });
}


function beforeEditName(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj(treeId);
	zTree.selectNode(treeNode);
	setTimeout(function() {
		if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
			setTimeout(function() {
				zTree.editName(treeNode);
			}, 0);
		}
	}, 0);
	return false;
}


function beforeRename(treeId, treeNode, newName, isCancel){
	if (newName.length == 0) {
		setTimeout(function() {
			var zTree = $.fn.zTree.getZTreeObj(treeId);
			zTree.cancelEditName();
			alert("节点名称不能为空.");
		}, 0);
		return false;
	}else if(newName==treeNode.name){
		return true;
	}else{
		$().hisAjax(basePath + "/systemTreeClass/specialAjax/updateNodeNameOnTree.action",{"stringMap.id":treeNode.id,"stringMap.newName":newName}