ztree树形菜单简单使用

最新推荐文章于 2021-03-13 04:53:05 发布

jiking233

最新推荐文章于 2021-03-13 04:53:05 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏： ztree 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/mingshen3/article/details/73896405

ztree 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在JavaScript前端项目中使用ZTree库来创建和管理树形菜单，包括引入必要的JS和CSS资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入js和css样式

<link href="metroStyle/metroStyle.css" rel="stylesheet">//这里实用了与boostrap更为相容的
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery.ztree.all.min.js"></script>

html

<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>

	$(function() {
		var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey : "id",//设置id
					pIdKey : "pId",//设置父级id
					rootPId : 0
				//设置跟节点id
				}
			},
			callback: {//点击事件
				onClick: zTreeOnClick
			}
		};
		var treeNodes = [ {
			"id" : 1,
			"pId" : 0,
			"name" : "test1"
		}, {
			"id" : 11,
			"pId" : 1,
			"name" : "test11"
		}, {
			"id" : 12,
			"pId" : 1,
			"name" : "test12"
		}, {
			"id" : 111,
			"pId" : 11,
			"name" : "test111"
		} ];
		zTreeObj = $.fn.zTree.init($("#tree"), setting, treeNodes);
		
		function zTreeOnClick(event, treeId, treeNode) {
		    alert(treeNode.id);
		};
	})
demo网盘下载地址：https://pan.baidu.com/s/1kV3dzBh