jquery.ztree树形插件简单的使用

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
        }
    },
};

第五步是查询递归表数据，并把查询出来的数据赋值给申明树形图

asp.net mvc控制器查询递归表的方法：（查询出所有字段）其他程序接口查询叙述亦可

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);
                });
            }
        });