zTree -- jQuery 树插件的实现与应用

在演示之前先要拿到css文件以及图标，还有js插件文件。

zTree文件在里面。首先获取文件并放好相应的路径。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<title></title>
<link rel="stylesheet" href="../../ztree/css/metroStyle.css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../ztree/js/jquery.ztree.excheck.js"></script> 
<script type="text/javascript" src="../../ztree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="../../ztree/js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="../../ztree/js/fuzzysearch.js"></script>
<style type="text/css">
    #treeDemo li span.button.icon01 {
	    margin: 0;
	    background: url(${basePath}/aers/images/addBlue.png) no-repeat scroll 0 0
		    transparent;
	    vertical-align: top;
	    *vertical-align: middle
    }
</style>
<script language="javascript">
    $(function(){
			var zNodes = [{id:0,pId:0,name:"集团"},
			              {id:1,pId:0,name:"财务团"},
			              {id:2,pId:1,name:"财务一部"},
			              {id:3,pId:1,name:"财务二部"},
			              {id:4,pId:3,name:"财务一处"},
			              {id:5,pId:3,name:"财务二处"},
			              {id:6,pId:0,name:"开发部"},
			              {id:7,pId:6,name:"研发一部"},
			              {id:8,pId:6,name:"研发二部"},
			              {id:9,pId:6,name:"研发三部"},
			              {id:10,pId:8,name:"集团项目团队"},
			              {id:11,pId:8,name:"外部项目团队"},
			              {id:12,pId:0,name:"测试部"},
			              {id:13,pId:12,name:"测试一部"},
			              {id:14,pId:12,name:"测试二部"},
			              {id:15,pId:0,name:"实施部"},
			              {id:16,pId:15,name:"实施一部"},
			              {id:17,pId:15,name:"实施二部"},
			              ];
			initOrgList1("#treeDemo", zNodes);
		});
		
		
		
		function initOrgList1(dom, zNodes) {
			
			// 树配置
			var setting = {
				view : {
					nameIsHTML: true,  // 表示支持 / 不支持 HTML 脚本
					selectedMulti : false, // 支持 / 不支持 同时选中多个节点
					addDiyDom : addDiyDom1     //自定义控件的节点
				},
				data : {
					simpleData : {
						enable : true  //简单数据模式   id，pId，name
					}
				}
			}
			var treeObj = $(dom);
			
			$.fn.zTree.init($(dom), setting, zNodes);
			
		}
		
		function addDiyDom1(treeId, treeNode) {
			var aObj = $("#" + treeNode.tId);
			var editStr = "<span class='tree1Icon' id='treeDemo_diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'><span class='button icon01'></span></span>";
			aObj.append(editStr);
			var btn = $("#treeDemo_diyBtn_" + treeNode.id);
			if (btn)
				btn.bind("click", function(e) {
					alert(1);
				});
		}
</script>
</head>
<body>
    <div class="">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</body>
</html>

zTree -- jQuery 树插件的实现与应用

其中部分js是树插件的另一些功能具体请看树插件的api文档。研究半天就懂了。很简单的。

zTree -- jQuery 树插件的实现与应用

相关推荐