zTree初体验（五）——树间数据交换

我发现，树与树之间的交换，在网站中的应用并不多，其实这是一个很好的功能。比如说，我们项目中用的的“自定义关注”功能。因为在我们的日常工作中，我们不会跟所有人都有工作交集，相反我们总是在频繁的跟一部分人打交道，也就是我们关注的并不是所有人，而只是跟我们工作相关的。我们可以将用户和部门加入到自定义关注中，并可以自定义修改用户和组的备注名称，而且可自己调整用户和组的顺序。是不是很方便？

对于多棵树之间拖拽的操作非常简单，只需要创建两棵可拖拽的树即可，同时可根据 各种事件回调函数 以及 zTree 的方法配合实现较复杂的操作规则，这里只是简单演示。根据自己的业务需要可再自行添加相应功能代码。

首先，给两棵树“占个地儿”：

<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div class="right">
		<ul id="treeDemo2" class="ztree"></ul>
	</div>

其次，看一下实现简单拖拽的js代码：

<SCRIPT type="text/javascript">
	var setting = {
		edit: {
			enable: true,
			showRemoveBtn: false,
			showRenameBtn: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeDrag: beforeDrag,
			beforeDrop: beforeDrop
		}
	};

	var zNodes =[
		{ id:1, pId:0, name:"父节点 1", open:true},
		{ id:11, pId:1, name:"叶子节点 1-1"},
		{ id:12, pId:1, name:"叶子节点 1-2"},
		{ id:13, pId:1, name:"叶子节点 1-3"},
		{ id:2, pId:0, name:"父节点 2", open:true},
		{ id:21, pId:2, name:"叶子节点 2-1"},
		{ id:22, pId:2, name:"叶子节点 2-2"},
		{ id:23, pId:2, name:"叶子节点 2-3"},
		{ id:3, pId:0, name:"父节点 3", open:true},
		{ id:31, pId:3, name:"叶子节点 3-1"},
		{ id:32, pId:3, name:"叶子节点 3-2"},
		{ id:33, pId:3, name:"叶子节点 3-3"}
	];

	function beforeDrag(treeId, treeNodes) {
		for (var i=0,l=treeNodes.length; i<l; i++) {
			if (treeNodes[i].drag === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		return targetNode ? targetNode.drop !== false : true;
	}
	
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		$.fn.zTree.init($("#treeDemo2"), setting);
		
	});
</SCRIPT>

最后，看一下效果：



哈哈，是不是很简单，这样一来，拖拖拽拽就能得到自己想到的内容。这里只是简单实现，做为抛砖引玉，具体的肉的，还得自己去补，像与节点判断，数据库同步……