ztree.js v3.*

Posted 2022-11-30 起名字是很难的事

插件地址：

https://cdn.staticfile.org/zTree.v3/3.5.01/css/zTreeStyle/zTreeStyle.css

https://cdn.staticfile.org/zTree.v3/3.5.01/js/jquery.ztree.all.min.js

 一、注意事项

• js:使用时直接应用js及css文件即可；
• 将 zTree 容器的 className 设置为 'ztree'；
• zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标；实际开发中建议也都采用图片切割的方式
• 异步加载的特性：对于异步加载模式下，需要在获取节点后处理的事情，尽量利用 onAsyncSuccess / onAsyncError 事件回调函数去处理，这样才能保证异步加载正常完毕后执行你需要的操作。

二、开始

1.setting配置

        var setting = 
            view: 
                dblClickExpand: true, //双击节点时，是否自动展开父节点的标识
                showLine: true, //设置 zTree 是否显示节点之间的连线。
                showIcon: false, //设置 zTree 是否显示节点的图标。
                selectedMulti: false, //设置是否允许同时选中多个节点。
                expandSpeed: '', //zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。三种预定速度之一的字符串("slow", "normal", or "fast")；设置为 "" 时，不显示动画效果
            ,
            data: 
                key:
                    children:"sons", //zTree 节点数据中保存子节点数据的属性名称，默认“children”
                    name:'name', //zTree 节点数据保存节点名称的属性名称。
                ,
                
                simpleData: 
                    enable: false, //确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)，不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式，默认false
                
            ,
            check:
                chkStyle:"radio", //勾选框类型(checkbox 或 radio）
                enable:true, //true时勾选框生效
                radioType: "all" //radio 的分组范围。radioType = "level" 时，在每一级节点范围内当做一个分组；radioType = "all" 时，在整棵树范围内当做一个分组。
            ,
            check:
                enable:false,
                chkStyle: "checkbox",
                chkboxType:  "Y": "", "N": ""  //勾选 checkbox 对于父子节点的关联关系.Y属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点
            
        

 

setting.async

名称	概述	Array格式说明	Function参数说明	举例
autoParam	异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效] 默认值:[]	1、将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"] 2、可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"]	treeIdString 对应 zTree 的 treeId，便于用户操控 treeNodeJSON 需要异步加载子节点的的父节点 JSON 数据对象 针对根进行异步加载时，treeNode = null   返回值Array(String) 返回值同 Array(String) 格式的数据	1.设置id属性为自动提交的参数 var setting = async: enable: true, url: "http://host/getNode.php", autoParam: ["id"] ; //假设异步加载父节点(node = id:1, name:"test") 的子节点时，将提交参数 id=1   //2.设置 id 属性作为 zId 成为自动提交的参数 var setting = async: enable: true, url: "http://host/getNode.php", autoParam: ["id=zId"] ; //假设对父节点 node = id:1, name:"test"，进行异步加载时，将提交参数 zId=1
enable	设置 zTree 是否开启异步加载模式 默认false
type	Ajax 的 http 请求模式 默认“post”
otherParam	Ajax 请求提交的静态参数键值对。	Array格式： 可以为空[ ]，如果有 key，则必须存在 value。 例如：[key, value]   JSON格式： 直接用 JSON 格式制作键值对， 例如： key1:value1, key2:value2	treeId String 对应 zTree 的 treeId，便于用户操控 treeNodeJSON 需要异步加载子节点的的父节点 JSON 数据对象 针对根进行异步加载时，treeNode = null 返回值Array(String) || JSON 返回值同 Array(String) || JSON 格式的数据	//1. 设置 Array(String) 格式的参数 var setting = async: enable: true, url: "http://host/getNode.php", otherParam: ["id", "1", "name", "test"] ; //进行异步加载时，将提交参数 id=1&name=test   //2.设置 JSON 格式的参数 var setting = async: enable: true, url: "http://host/getNode.php", otherParam: "id":"1", "name":"test" ; 进行异步加载时，将提交参数 id=1&name=test
url	Ajax 获取数据的 URL 地址

2.zTreeNodes

zTreeNodes = [
		"name":"网站导航", open:true, children: [
			 "name":"google", "url":"http://g.cn", "target":"_blank",
			 "name":"baidu", "url":"http://baidu.com", "target":"_blank",
			 "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"
			]
		
	];

3.实例化

zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

4.function说明

名称	概述	参数说明	返回值	示例
expandAll	展开 / 折叠 全部节点 此方法不会触发 beforeExpand / onExpand 和 beforeCollapse / onCollapse 事件回调函数。 请通过 zTree 对象执行此方法。	expandFlag = true 表示 展开 全部节点 expandFlag = false 表示 折叠 全部节点	true 表示 展开 全部节点 false 表示 折叠 全部节点 null 表示 不存在任何父节点	//展开全部节点 var treeObj = $.fn.zTree.getZTreeObj("tree"); treeObj.expandAll(true);
transformToArray	将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式。(免去用户自行编写递归遍历全部节点的麻烦)	treeNodesArray(JSON) / JSON 需要被转换的 zTree 节点数据对象集合 或 某个单独节点的数据对象	转换后的简单 Array 数据格式	var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.transformToArray(treeObj.getNodes());
getCheckedNodes	获取输入框被勾选 或 未勾选的节点集合。 [setting.check.enable = true 时有效]	checked = true 表示获取 被勾选 的节点集合 checked = false 表示获取 未勾选的节点集合 省略此参数，等同于 true。 对于 treeNode.nocheck = true 的节点不进行获取。	返回全部符合要求的节点集合 Array	var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getCheckedNodes(true);
getNodesByParam	根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象集合	key String 需要精确匹配的属性名称   value 需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可   parentNodeJSON 可以指定在某个父节点下的子节点中搜索 忽略此参数，表示在全部节点中搜索	匹配精确搜索的节点数据集合 如无结果，返回 [ ]	var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getNodesByParam("name", "test", null);
updateNode	更新某节点数据，主要用于该节点显示属性的更新。 1、可针对 name、target、 url、icon、 iconSkin、checked、nocheck 等这几个用于显示效果的参数进行更新，其他用于 zTreeNodes 的参数请不要随意更新，对于展开节点，还请调用 expandNode方法，因此请勿随意修改 open 属性。 2、用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。	treeNodeJSON 指定需要更新的节点 JSON 数据 请务必保证此节点数据对象 是 zTree 内部的数据对象   checkTypeFlagBoolean checkTypeFlag = true 表示按照 setting.check.chkboxType 属性进行父子节点的勾选联动操作 checkTypeFlag = false 表示只修改此节点勾选状态，无任何勾选联动操作 当 setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时才有效 不影响父子节点中 treeNode.nocheck = true 的节点。	无	var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getNodes(); if (nodes.length>0) nodes[0].name = "test"; treeObj.updateNode(nodes[0]);