Js控件—zTree树形控件使用

Js控件—zTree树形控件使用

开发工具与关键技术：VS  MVC、Jquery
撰写时间：2019/6/16

由于项目需要用到树形图，本人也是第一次接触树形的知识，所以在网上查找很多树形zTree的资料，而且zTree官方也有详细的API文档。经过自己的捣鼓之后弄出了想要的树形效果，所以就记了下来，方便自己记忆，也相当于一个学习zTree的一个总结吧。
树形控件的使用是应用过程中必不可少的。zTree是一个依靠jQuery实现的多功能“树形插件”。zTree的介绍：

1、zTree 是利用JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
2、zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
3、采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
4、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
5、支持 JSON 数据
6、支持静态 和 Ajax 异步加载节点数据
7、支持任意更换皮肤 / 自定义图标（依靠css）
8、支持极其灵活的 checkbox 或 radio 选择功能
9、提供多种事件响应回调
10、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
11、在一个页面内可同时生成多个 Tree 实例
12、简单的参数配置实现 灵活多变的功能

核心函数和属性的介绍：
核心：zTree(setting,
[zTreeNodes])这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。
核心参数：setting
zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
因为参数太多，具体参数详见zTreeAPI
Stting举例：
var setting={showLine：true，checkable：true，}；
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
1、zTree官方网站：http://www.ztree.me/v3/main.php#_zTreeInfo
在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细
关于zTree的节点数据的获取方式分为静态（直接定义）的和动态（后台数据库加载）的
具体的配置步骤：
第一步 —— 引入相关文件

<link href="~/Plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../../Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script src="~/Plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>   

备注：

1、第一个（zTreeStyle.css）是zTree的样式css文件，引入了这个，才能呈现出树形的结构样式，
2、第二个（jquery-1.9.1.min.js）是jQuery文件，因为要用到，
3、第三个（jquery.ztree.core-3.5.min.js）则是zTree的核心js文件，这个是必须的，
4、最后一个（js/jquery.ztree.excheck-3.5.min.js）则是拓展文件，主要用于单选框和复选框的功能，因为用到了复选框/单选框，所以也要要引进来。
第二步 —— 相关配置（具体的详细配置，请到官网参考详细API文档）

  var setting = {
    check:{               
    enable: true,//每个节点是否显示radio              
    chkStyle: "radio",//单选框类型
    chkboxType: { "Y": "ps","N": "ps" },
    isSimpleData:true,              //数据是否采用简单 Array格式，默认false
    treeNodeKey:"id",               //在isSimpleData格式下，当前节点id属性
    treeNodeParentKey:"pId",        //在isSimpleData格式下，当前节点的父节点id属性
    showLine: true,                  //是否显示节点间的连线
    checkable: true
             },
    data: {                  
   	 simpleData: {                           
   	 enable: true    
              	   }
            },                
callback: {
                      onClick: zTreeOnClick//回调函数   
            }   
}；

第三步 —— 节点数据加载，呈现树形结构

1、 html页面，直接放一个ul就可以，数据最终会自动加载到这个ul元素里面

<div class="col-2 col-lg-2  zTreeDemoBackground">
   <fieldset class="layui-elem-field layui-field-title m-0  p-0">
             <legend>所有分类</legend>
   </fieldset>
       <ul id="treeDemo" class="ztree"></ul>            
</div>

2、 js加载数据
一、静态数据
1、标准数据格式

var  nodes = [ 
{name: "父节点1",
children: [      
{name: "子节点1"},       
{name: "子节点2"}
    ]}
];

2、简单数据格式

var zNodes =[
	 { id:1, pId:0, name:"test 1", open:false},
	 { id:11, pId:1, name:"test 1-1", open:true},
	 { id:111, pId:11, name:"test 1-1-1"},
	 { id:112, pId:11, name:"test 1-1-2"},
	 { id:12, pId:1, name:"test 1-2",open:true},
];

注意zTree的默认配置是不启用简单数据格式，使用简单数据格式一定要在setting中进行简单数据格式的相关配置。
//页面加载事件

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化树形

});
    function onCheck(e,treeId,treeNode){
	 var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
	   nodes=treeObj.getCheckedNodes(true),
	   v="";
	  for(var i=0;i<nodes.length;i++){
	 v+="nodes[i].name" +="" ",";="" alert(nodes[i].id);="" 获取选中节点的值="" }="" }<="" pre=""><br
}

二、动态方式（从后台数据库加载）

// 加载树形结构数据

function  onLoadZTree(){
	var treeNodes;
 	$.ajax({
	 	 async:false,//是否异步
		 cache:false,//是否使用缓存
		 type:'POST',//请求方式：post
		 dataType:'json',//数据传输格式：json
		 url:$('#treeDemo).val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
		 error:function(){//请求失败处理函数
		alert('亲，请求失败！');
  },
		success:function(data){ //请求成功后处理函数 
				 console.log(data);
				 $(document).ready(function(){
						$.fn.zTree.init($("#treeDemo"), setting, data);///初始化树形
		   }
	   }
});

zTree常用方法：
1、获取zTree对象

var treeObj =$.fn.zTree.getZTreeObj("tree");

2、增加节点

addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可

index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略

newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可

isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开

3、勾选或取消勾选全部节点

checkAllNodes(checked);

checked参数为true时全部勾选，为false时全部取消勾选。

4、勾选或取消勾选单个节点

checkNode(node, checked, checkedTypeFlag，callbackFlag);

node：要进行操作的节点

checked：为true勾选，为false取消勾选

checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动，为false不联动

callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数，为false不执行

5、编辑节点

edit(node); 使节点处于编辑状态，必须引用jquery.ztree.exedit 扩展。

6、展开或折叠全部节点

expandAll(expand);

expand为true是展开所有节点，为false是折叠所有节点。

7、根据节点属性查找结点

getNodesByParam(key,value, parentNode);

key:属性名

value:属性值

parentNode:是否在指定节点下查找，为null表示整个树查找。

8、获取被勾选或未被勾选的节点集合

getCheckedNodes(checked);

checked为true表示获取所有被勾选的节点集合，为false表示所有未被勾选的节点集合

9、获取输入框勾选状态被改变的节点集合

getChangeCheckedNodes()

上面的一些总结zTree的方法，很多来源于网上查找；需要更多的方法，建议查看zTree的官方的APL文档，本人对于英文认识比较差，所以在网上找到一些大神分享的方法，可以参考很多资料，也容易找到自己想要的方法;在网上找到一个比较好理解的总结，获取需要一些简洁明了的方法可以到这个地方查看https://www.cnblogs.com/fonour/p/zTree.html