开发工具与关键技术：Visual Studio 与jquery.ztree树形插件
作者：黄灿
撰写时间：2019.6.25
zTree 是一个依靠 jQuery 实现的多功能 “树形插件”， 拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，满足大部分业务的开发。
使用zTree树形插件的第一步是先引入zTree的CSS外部样式和JS文件
<link href="~/Plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Plugins/zTree_v3/js/jquery.ztree.all.min.js"></script>
第二步是在Html创建zTree的div和ul标签，ul标签给上class="ztree"和一个ID，ID的名字随便取
<div class="col-12 col-lg-3 border-z" id="Test">
<ul id="ztree" class="ztree"></ul>
</div>
第三步是认识zTree树形插件的格式，id和pId都是数据库中的主键，id和pId的区别是：id是子健，pId是父键
var zNodes = [
{ id: 1, pId: 0, name: "[core] 基本功能 演示", open: true },
{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据"},
{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据"},
];
第四步是初始化zTree，定义ztree的配置参数setting，和申明一个空的zTree树形格式
var zNodes = [];//申明树形图
//树形图的参数,树形图的参数有很多，这里只申明一个最基本的，更多参数请参照zTree官网的API文档：http://www.treejs.cn/v3/api.php
var setting = {
data: {
simpleData: {
enable: true
}
},
};
第五步是查询递归表数据，并把查询出来的数据赋值给申明树形图
控制器查询递归表的方法：（查询出所有字段）
public ActionResult selectPartsType()
{
var listResult = from tbPartsType in myModels.SYS_PartsType
orderby tbPartsType.PartsTypeID ascending
select new
{
SYS_PartsTypeID =
tbPartsType.SYS_PartsTypeID,
PartsTypeID =
tbPartsType.PartsTypeID,
PartsTypeNumber =
tbPartsType.PartsTypeNumber,
PartsTypeName =
tbPartsType.PartsTypeName,
Remark =
tbPartsType.Remark,
};
return Json(listResult, JsonRequestBehavior.AllowGet);
javascript的方法：
$.post("/BasicsData/PartsType/selectPartsType", function (data) {
if (data != null) {
for (var i in data) {//for循环查询出的所有数据
var PartsType = {};//申明树形图的子节点
PartsType.id =
data[i].PartsTypeID; //赋值树形图的子节点的ID
PartsType.pId =
data[i].SYS_PartsTypeID;//赋值树形图的子节点的父ID
//判断并赋值树形图的名字
if (data[i].PartsTypeNumber != null) {
PartsType.name =
$.trim(data[i].PartsTypeNumber) + "[" + $.trim(data[i].PartsTypeName) + "]";
PartsType.id =
data[i].PartsTypeID;
}
else {
PartsType.name =
$.trim(data[i].PartsTypeName)
PartsType.id =
data[i].PartsTypeID;
}
if (data[i].SYS_PartsTypeID == null || data[i].SYS_PartsTypeID == 0) {
PartsType.pId = 0
}
PartsType.open = true; //设置节点是否可以打开子节点
zNodes.push(PartsType);//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 向申明的树形图中添加子节点
}
$(document).ready(function () {
$.fn.zTree.init($("#ztree"), setting, zNodes);
});
}
});