ztree的使用经验1（非常简单的代码）

对于ztree，我也是刚刚接触。作为一个小白，一开始我也是看不懂那些较为高深的代码，脑壳疼。。。所以打算从最简单的学起，一步一步的加深，并且整理笔记，发出来共享。这次整理的笔记非常简单，主要就是内容就是弄一个非常简单的树结构，并且实现树结构的点击事件，为后面的动态调用数据打基础。

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="<%=basePath%>res/js/jquery-1.3.2.min.js"></script>
		<link rel="stylesheet"href="<%=basePath%>res/zTree/css/metroStyle/metroStyle.css" />
		<script src="<%=basePath%>res/js/jquery.ztree.all.min.js"></script>
	</head>
<body>
	<div>
		<ul id="regionTree" class="ztree"></ul>
	</div>
	<script>
		var treeSetting = {
			data : {
				key : {
					name : "treeName" //zTree 节点的名称辨识字段，默认为name
				}
			},
			check : {
				enable : true //设置是否显示多选框，默认为false
			},
			callback : {
				onClick : treeClick //点击树节点，触发的事件。treeClick为自定义的事件
			}

		};

		//数据
		var datas = [
		//这里的treeName是前面自定义的
		{
			treeName : "1班",
			open : true,
			children : [ {
				treeName : "小米"
			}, {
				treeName : "小白"
			} ]
		}, {
			treeName : "2班",
			open : true,
			children : [ {
				treeName : "小号"
			}, {
				treeName : "小花"
			} ]
		} ];
		zTreeObj = $.fn.zTree.init($("#regionTree"), treeSetting, datas); //初始化树

		//返回节点名和节点tid和节点自定义的value,一般参数使用的都是treeNode（被点击的节点 JSON 数据对象）
		function treeClick(event, treeId, treeNode) {
			alert(treeNode.tId + ", " + treeNode.treeName);
		}

	</script>
</body>
</html>

实现的效果如下图
在这里插入图片描述
本人正在学习中，接下来会继续深入学习，并且实时更新共享！！！

来源：CSDN

作者：懒惰の猫

链接：https://blog.csdn.net/weixin_40496191/article/details/104612906

标签

ztree