ztree——展开到二级目录

原创已于 2023-03-17 16:05:49 修改 · 776 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-03-17 15:20:14 首次发布

文章展示了如何使用ZTreeJavaScript库来管理树形数据，包括展开所有节点和仅展开到二级目录的操作。代码示例中，通过ztreeObj.expandAll(true)可以展开所有节点，而通过遍历并调用expandNode方法则能实现展开到二级目录的效果。

在这里插入图片描述
展开全部：

ztreeObj.expandAll(true);//展开全部节点

在这里插入图片描述
展开到二级目录

const allNodes = ztreeObj.getNodes();
allNodes.forEach((item,index) => {
    ztreeObj.expandNode(allNodes[index])
})

全部代码展示：

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - checkbox</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="./assets/ztree/demo.css" type="text/css">
	<link rel="stylesheet" href="./assets/ztree/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="./assets/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./assets/ztree/js/jquery.ztree.core.js"></script>
	
	<SCRIPT type="text/javascript">
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			
		};

		var zNodes =[
			{ id:1, pId:0, name:"目录 1"},
			{ id:11, pId:1, name:"目录 1-1"},
			{ id:111, pId:11, name:"目录 1-1-1"},
			{ id:112, pId:11, name:"目录 1-1-2"},
			{ id:12, pId:1, name:"目录 1-2"},
			{ id:121, pId:12, name:"目录 1-2-1"},
			{ id:122, pId:12, name:"目录 1-2-2"},
			{ id:2, pId:0, name:"目录 2"},
			{ id:21, pId:2, name:"目录 2-1"},
			{ id:22, pId:2, name:"目录 2-2"},
			{ id:221, pId:22, name:"目录 2-2-1"},
			{ id:222, pId:22, name:"目录 2-2-2"},
			{ id:23, pId:2, name:"目录 2-3"}
		];
		
		
		$(document).ready(function(){
			const ztreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            // ztreeObj.expandAll(true);//展开全部节点
            // 展开到二级目录
            const allNodes = ztreeObj.getNodes();
            allNodes.forEach((item,index) => {
                ztreeObj.expandNode(allNodes[index])
            })
		});
	</SCRIPT>
</HEAD>

<BODY>

    <ul id="treeDemo" class="ztree"></ul>

</BODY>
</HTML>