ztree树结构默认选择目录下第一个子节点

最新推荐文章于 2021-12-22 11:29:42 发布

原创最新推荐文章于 2021-12-22 11:29:42 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用 ZTree 插件实现地理层级结构的数据展示，并提供了具体的 JavaScript 初始化代码及 HTML 结构示例。

在这里插入图片描述

<div class="content_wrap" style="margin: 20px;">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>

var setting = {
	data: {
		simpleData: {
			enable: true
		}
	}
};

var zNodes = [{
		id: 1,
		pId: 0,
		name: "中国",
		open: true,
		children:[{
				id: 11,
				pId: 0,
				name: "北京",
				open: true,
				children:[{
					id: 111,
					pId: 0,
					name: "丰台",
					open: true,
					children:[{
						id: 1111,
						pId: 0,
						name: "佃起村",
						open: true,
						children:null
					}]
					},{
						id: 112,
						pId: 0,
						name: "通州",
						open: true,
						children:[{
							id: 1121,
							pId: 0,
							name: "翠福园",
							open: true,
							children:null
						}]
					}
				]
			},{
				id: 12,
				pId: 0,
				name: "河南",
				open: true,	
				children:[{
					id: 121,
					pId: 0,
					name: "郑州",
					open: true,
				}]
			}]
	}
];

var initID;
$(document).ready(function() {
	var zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
	//调用提取第一个子节点方法
	firstNode(zNodes[0])
	 // 默认选中一级目录下的第一个子节点
	zTree.selectNode(zTree.getNodeByParam("id", initID));
});

// 提取目录中第一个子节点
function firstNode(root){
	if(root.children == null){
		return initID = root.id;
	}
	firstNode(root.children[0])
}