zTree

最新推荐文章于 2022-05-24 23:57:10 发布

原创最新推荐文章于 2022-05-24 23:57:10 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

html 专栏收录该内容

2 篇文章

订阅专栏

本文展示了一个使用ZTree插件的HTML页面示例，该页面加载了一个基于简单JSON数据的树形结构，展示了如何使用jQuery和ZTree来初始化树，并提供了树节点的详细结构，包括父节点和子节点的关系。

<!DOCTYPE html>
<HTML><HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://www.treejs.cn/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="http://www.treejs.cn/v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.treejs.cn/v3/js/jquery.ztree.core.js"></script>
</HEAD>
<BODY>
	<h1>最简单的树 -- 简单 JSON 数据</h1>
		<div class="zTreeDemoBackground"> 
			<ul id="treeDemo" class="ztree">
			</ul> 
		</div>
</BODY>
</HTML>
<SCRIPT type="text/javascript">
 $(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});
var setting = { data: { simpleData: { enable: true } } };
var zNodes =[{ id:1, pId:0, name:"父节点1 - 展开", open:true},
			 { id:11, pId:1, name:"父节点11 - 折叠"}, 
			 { id:111, pId:11, name:"叶子节点111"}, 
			 { id:112, pId:11, name:"叶子节点112"}, 
			 { id:113, pId:11, name:"叶子节点113"}, 
			 { id:114, pId:11, name:"叶子节点114"}, 
			 { id:12, pId:1, name:"父节点12 - 折叠"}, 
			 { id:121, pId:12, name:"叶子节点121"}, 
			 { id:122, pId:12, name:"叶子节点122"}, 
			 { id:123, pId:12, name:"叶子节点123"}, 
			 { id:124, pId:12, name:"叶子节点124"}, 
			 { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true}, 
			 { id:2, pId:0, name:"父节点2 - 折叠"}, 
			 { id:21, pId:2, name:"父节点21 - 展开", open:true}, 
			 { id:211, pId:21, name:"叶子节点211"}, 
			 { id:212, pId:21, name:"叶子节点212"}, 
			 { id:213, pId:21, name:"叶子节点213"}, 
			 { id:214, pId:21, name:"叶子节点214"}, 
			 { id:22, pId:2, name:"父节点22 - 折叠"}, 
			 { id:221, pId:22, name:"叶子节点221"}, 
			 { id:222, pId:22, name:"叶子节点222"}, 
			 { id:223, pId:22, name:"叶子节点223"}, 
			 { id:224, pId:22, name:"叶子节点224"}, 
			 { id:23, pId:2, name:"父节点23 - 折叠"}, 
			 { id:231, pId:23, name:"叶子节点231"}, 
			 { id:232, pId:23, name:"叶子节点232"}, 
			 { id:233, pId:23, name:"叶子节点233"}, 
			 { id:234, pId:23, name:"叶子节点234"}, 
			 { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
			 ];

 // var setting = {check: {enable: true}, data: { simpleData: { enable: true } } ,callback:{onClick:zTreeOnClick}};
	//tree获取选中的值
//function zTreeOnClick(event, treeId, treeNode) {       //第二步
//console.log("节点id:" + treeNode.id + "节点名称" + treeNode.name);
// var treeObj = $.fn.zTree.getZTreeObj("deptTreeData"),
// 		nodes = treeObj.getCheckedNodes(true),
// 		v = "";
// for (var i = 0; i < nodes.length; i++) {
// 	v += nodes[i].name + ",";
// 	console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
// }
	}
 </SCRIPT>