Ztree核心功能整合

由于公司Feature需要优化原本的资源树，主要是添加可拖拽的功能以及原本臃肿的树形结构。所以这几天就在网上找了一下这方面的资源

以及相关Demo，初步订了三个方案(JsTree,Nestable,Ztree).

最后敲定为使用Ztree来优化,个人认为这个插件比较简单粗暴容易上手^_^

看了一天Ztree的API以及它提供的Demo,具体的实现思路,相关的业务流程整合差不多也清晰了,最后把Ztree里的异步加载，节点拖拽和复制，自定义添加操作，自定义图标，右键菜单等都整合在了一起!

PS:个人觉得zTreeStyle.css有些样式不太美观，索性就做了一些修改！

JS代码:

JSP代码:

${tips}

	    
系统模块维护  
	    	
				增加资源
			
		
 



		



	

		
增加资源
		
编辑资源
		
删除资源
		
增加功能
		
修改功能
		
删除功能
		
恢复列表
	

初始化Step1:

$.fn.zTree.init($("#treeDemo"), setting, null);

Ztree初始化由于用的是异步加载节点参数传的null,在核心配置setting里，其实就是一个普通的Ajax请求，回调函数ajaxDataFilter取到节点信息。要注意对isParent的判断,要不然可能会出现无限循环树

拖拽控制Step2：

callback: {//核心回调函数
			beforeDrag: beforeDrag,
			beforeDrop: beforeDrop,
			onDrop: zTreeOnDrop,	
		}

 beforeDrag, beforeDrop,是对拖拽前的一些准备判断可以对其进行一些拖拽的约束，比如不能拖拽成根节点，或者不能将多层次的节点拖拽为目标节点的子节点(inner)等等。拖拽结束后核心数据库的更新与同步都在zTreeOnDrop函数中，也是通过Ajax进行的操作。

PS:也是支持按住Ctrl拖拽多个的哦!^_^

自定义添加按钮 Step3：

view: {
	addHoverDom: addHoverDom,//自定义添加按钮
	removeHoverDom: removeHoverDom,//自定义隐藏按钮
}

addHoverDom，removeHoverDom函数里定义了按钮button,以及对应的事件函数，类似于Ztree自带的showRemoveButton,shoeRenameButton一样，只是我们需要一个控制开关true/false控制其显示与隐藏

自定义图标Step4：

只是在Ztree提供的节点node(Json类型)中添加一个icon或者iconSkin属性,soEZ,

	responseData[i].iconOpen = '${ctx}/static/ztree/css/zTreeStyle/img/diy/1_open.png';
	responseData[i].iconClose = '${ctx}/static/ztree/css/zTreeStyle/img/diy/1_close.png'; 

右键菜单Step5:

callback: {//核心回调函数
		.....
		onRightClick: OnRightClick
		}

这里主要是定义一个核心回调函数，实现可以拷贝Demo里的，只需要对菜单里的显示信息，以及对应的click函数进性更改，个人觉得最好的是不用去实现什么mousemove,mouseover等函数以及坐标的计算。^_^

附上效果图:

Final:

Ztree的Demo以及API还是很详细的，我只是把他们整合起来了，有什么不妥的地方还需要大家多多指教!

PS:第一次写博客，求勿喷