ztree的使用经验1（非常简单的代码）
程序员文章站
2022-06-08 15:53:58
...
对于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>
实现的效果如下图
本人正在学习中，接下来会继续深入学习，并且实时更新共享！！！