easyui tree动态从一棵树添加节点到另外所选一棵树中

   双击easyui一棵树(源树)的节点,然后将此节点的信息动态添加到另外一棵树(目标树)中,如果目标树选择了节点,则添加到目标树选择节点下作为子节点,双击目标树时动态删除此节点及其下的子节点。

 

  easyui版本为jquery-easyui-1.3.1,其他版本自行查看api修改对应代码。

easyui tree动态从一棵树添加节点到另外所选一棵树中

  源代码如下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>easyui tree动态从一棵树添加节点到另外所选一棵树中</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    window.onload = function () {
	        $('#treeSource').tree({
	            onDblClick: function (node) {
	                var selected = $('#treeTarget').tree('getSelected');
	                $('#treeTarget').tree('append', {
	                    parent: selected ? selected.target : null,
	                    data: [{
	                        text: node.text
	                    }]
	                });
	            }
	        });
	        $('#treeTarget').tree({
	            onDblClick: function (node) {
	                $('#treeTarget').tree('remove',node.target);
	            }
	        });
	    }
	</script>
</head>
<body>
	<ul id="treeSource">
		<li>
			<span>Folder</span>
			<ul>
				<li data-options="state:'closed'">
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
    <br />目标树<br />
	<ul id="treeTarget"></ul>
</body>
</html>

 


原创文章,转载请注明出处:easyui tree动态从一棵树添加节点到另外所选一棵树中

评论(0)Web开发网
阅读(680)喜欢(0)easyui开发技巧