树状图布局插件介绍

开发工具：VS
关键技术：.NET MVC
作者：黄小龙
撰写时间：2019.6.5
树状图是以数据树的图形表示形式，以父子层次结构来组织对象，把最大的父级放在顶上，用图表示关系。如

在这里，我用到的插件js和css是：

用法：先将插件的js文件和css文件引入，然后在html部给一个div,div里面放一个ul,这个ul就是我们要放置内容部分的一个盒子了。
然后就是js部分的编写：
var setting = {
data: {
simpleData: {
enable: true
}
}
};
开始的初始化，写法是固定的，然后就是内容：

给了open属性的值的就是父级的节点了，iconOpen属性值的意思就是当节点打开时显示的图标，iconClose属性值的意思节点关闭后显示的图标。这些两个值只是为了让树状图更加好看，可以不添加 。当然，默认的图标加减号也需要把路径换成自己这里的路径，不然它什么图片都不会显示。
最后就是一个加载事件：
$(document).ready(function(){
. f n . z T r e e . i n i t ( .fn.zTree.init( .fn.zTree.init((“#treeDemo”),setting,zNodes);
});
Init里面的就是开始我们给的ul标签的一个ID，因为我们写的内容就是封装在这个里面的。后面的两个参数一个是调用开始参数给的属性， 另一个调用内容部分的参数。
这是最基础的写法，还有几个参数介绍一下：
不显示节点：设置 setting.view.showIcon 属性为showIconForTree
不显示连接线：设置setting.view.showLine属性为false
使用checkbox勾选操作:设置setting.check中的enable属性为true
隐藏节点功能: 初始化设置 treeNode.isHidden = true;
使用radio勾选操作：设置setting.check中的各个属性，它的属性值有3个，分别是：enable,cnkStyle,radioType
删除和新增节点：用的是beforeRename/onRename事件回调函数控制。
setting.check.nocheckInherit 可以设置子节点自动继承父节点的 nocheck 属性
我们还可以在外面设置其它的按钮让它来改变默认的功能设置
如：Checkbox勾选操作，控制勾选的范围关联点
我们的先在setting里面给一个check:{ enable:true},在后面写几个控制的方法

就这样就可以控制一次勾选时和取消勾选时的内容多少了。