1.用一个div进行包裹ztree结构，引用相关的js代码和css样式，这里用的样式是awesome.css
所引用的js文件，css文件可以在网上下载（这里所用到的jquery-ztree文件放在网盘了）
<ul id="tree" class="ztree"></ul>
<link type="text/css" rel="stylesheet" href="~/Scripts/jquery-ztree/css/awesomeStyle/awesome.css">
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
//编写相关的树状结构构件的代码
</script>2.对ztree进行结构处理
2.1 在对页面进行初始化操作的时候会进行获取数据，对获取数据后进行处理初始化树状
<script type="text/javascript">
//这里一般会引用jquery文件，我这边省略了，记得要引用，不然相关jquery的写法可能会报错的
$(function(){
//通过ajax获取树状所需要用的数据，或者其他获取数据方式也行
$.ajax({
url: "",//接口地址，调用后端接口的
type: "get",//get或者post
dataType: "json",
success: function (msg) {
var data= msg.Data;//接口调用之后返回的数据，这个具体情况具体获取，有的返回数据结构会不太一样
localStorage.setItem("dataTree", JSON.stringify(data));//将数据存储起来，便于后面可以获取使用，dataTree是自定义的名称，获取的时候会根据这个名称进行获取
//初始化树(是否显示复选框)，此处可以自定义参数，可以随意确定参数作用
//此处的是定义两个参数，第一个是表示是否显示复选框，
//第二个是自定义的内容（会用在定义树状节点后的操作图标）
initTree(false, addDiyDom);
},
error: function(msg) {
alert(msg.Message);
}
});
});
</script>2.2 初始化内容内部的处理initTree(false,addDiyDom)
//获取数据后会调用的方法
function initTree(enableCheck, addDiyDom) {
var zNodes = initNodes();//初始化节点
//设置树状基本的配置
var setting = {
check: {
enable: enableCheck,
chkStyle: "checkbox"
},
data: {
key: {
checked: "IsChecked",
name: "Name",
children: "Children",
isParent: "IsParent",
type: "Type",
level: "Level"
},
simpleData: {
enable: true,
idKey: "Id"
}
},
callback: {
beforeClick: zTreeBeforeClick,//点击判断是否操作点击事件
onClick: zTreeOnClick //如果beforeClick里的方法事件返回为true，
//则会回调此方法
},
view: {
addDiyDom: addDiyDom,//视图展示的自定义内容
fontCss: setFontCss //节点字体颜色的设置
},
edit: {
//此处可以设置操作增删改节点，
//但是如果在自己自定义addDiyDom就可以不需要在此处的设置了
}
};
//初始化
treeObj = $.fn.zTree.init($("#tree_mat"), setting, zNodes);
treeObj.expandAll(true);//节点全部展开
}2.3 在初始化树状方法initTree内需要进行处理的方法
2.3.1 addDiyDom视图展示 的自定义内容（在获取数据的后调用的初始化的时候会作为参数， 上面有出现）
initTree(false, addDiyDom);
内容可以根据具体情况具体添加
//这个方法的两个参数是固定的
function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
//节点名称后面对应的相关操作（一般会设置成图标，进行点击到对应的事件进行对应处理）
var editStr = "<a href='javascript: void(0)' onclick=operationAdd('" + treeNode.Id + "','" + treeNode.Type + "') id='a_" + treeNode.Id
+ "_add_" + treeNode.Type + "' title='新增' ><i class='fa fa-plus-square orange'></i></a>";
editStr = editStr + "<a href='javascript: void(0)' onclick=operationEdit('" + treeNode.Id + "','" + treeNode.Type + "') id='a_" + treeNode.Id
+ "_update_" + treeNode.Type + "' title='修改'><i class='fa fa-edit blue'></i></a>"
+ "<a href='javascript: void(0)' onclick=operationDelete('" + treeNode.Id + "','" + treeNode.Type + "') id='a_" + treeNode.Id
+ "_delete_" + treeNode.Type + "' title='删除'><i class='fa fa-trash red'></i></a>";
aObj.append(editStr);
}; 图标的效果大致如此，鼠标放上去会显示对应的标题
2.3.2 initNodes初始化节点
function initNodes() {
//根节点，这组数据是最上的根节点，数据的字段根据具体情况具体添加，
//跟获取数据localStorage.getItem("dataTree")的结构字段保持一致
var rootNode = new Object();
rootNode.Id = 0;//id
rootNode.Name = "根节点";//名称
rootNode.Level = 0;//层级
rootNode.Type = "";//类型MatGroup站点群组,Mat站点,Site安装位置
rootNode.IsParent = true;//是否为父级
rootNode.IsChecked = false;
rootNode.ParentId = 0;
rootNode.ParentName = "";
rootNode.ParentType = "";
rootNode.Status = "";
rootNode.SuperiorStatus = "";
rootNode.Children = [];
//获取在初始化ajax处得到的数据（2.1处有说明）
var dataInfoTree = JSON.parse(localStorage.getItem("dataTree"));
if (dataInfoTree == null) {
return rootNode;
}
rootNode.Children = dataInfoTree;//将数据放在根节点的子节点中
return rootNode
}2.3.3 setFontCss节点字体颜色设置
//设置字体颜色 具体情况具体判断设置
function setFontCss(treeId, treeNode) {
return treeNode.Status == "12" || treeNode.Status == "32" ? { color: "red" } : {};
}; 2.3.4 zTreeBeforeClick（beforeClick）点击判断是否操作点击事件，返回为true则触发点击事件
zTreeOnClick（onClick）这两个方法是连贯性的，所以一起说明
//点击判断是否操作点击事件，具体情况具体分析
function zTreeBeforeClick(treeId, treeNode, clickFlag) {
return (treeNode.id !== 0 && isClickIcon == false);
};
//zTreeBeforeClick为true，回调此方法
function zTreeOnClick(event, treeId, treeNode) {
//显示右边区域
var url = "";//页面地址
$("#frame").attr("src", url);//因为这块做的例子是将树状点击后的触发的是展示对应页面，
//页面对应的地址放在frame框架内，所以在此处会给frame提供路径
};ztree还有很多的其他的功能处理，我这边有的还没用上，后续若用上了会进行补充
参考地址：https://treejs.cn/v3/api.php
