zTree 的简单使用

柔光的暖阳◎ 2021-09-14 11:24 387阅读 0赞

一.简介

1.官网：[http://www.treejs.cn/v3/main.php\#\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTreeInfo]

2.[API 文档][API]

二.简单的API

1. 获取树的所有节点

var treeObj =$.fn.zTree.getZTreeObj("ztree");  
        var node = treeObj.getNodes();  
        var nodes = treeObj.transformToArray(node);

console.log(nodes);

2.获取选中的状态

①选中第一个节点
     	if(treeNode.isFirstNode==true){//同级节点中的第一个节点
            treeObj.selectNode(node);
         } 
    	//获取 id 为 tree 的 zTree 对象
    	var treeObj = $.fn.zTree.getZTreeObj("ztree");
    	//获取条件完全匹配的节点数据 JSON 对象
    	var node = treeObj.getNodeByParam("id", treeNode.id);
    	if(treeNode.isFirstNode==true){//同级节点中的第一个节点
    		treeObj.selectNode(node);
    	}
    
    ②选中（你需要的节点）
     	treeObj.selectNode(nodes[i]);
    
    ③获取当前被选中的节点数据集合
    	var treeObj = $.fn.zTree.getZTreeObj("tree");
    	var nodes = treeObj.getSelectedNodes();

三.简单的操作

1.带 checkbox 的多选下拉菜单

\[ 文件路径: super/select\_menu\_checkbox.html \]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

①.数据设置
    	A.初始化的标准嵌套格式的 JSON 数据对象
    	var nodes = [
    	{ "id":1, "name":"test1",
    		children: [
    		{ "id":3, "name":"test3"},
    		{ "id":4, "name":"test4"},
    		{ "id":5, "name":"test5"}
    		]
    	},
    	{ "id":2, "name":"test2"  }
    	]
    	B.
    	var zNodes =[
    		{id:1, pId:0, name:"北京"},
    		{id:2, pId:0, name:"天津"},
    		{id:3, pId:0, name:"上海"},
    		{id:6, pId:0, name:"重庆"},
    		{id:4, pId:0, name:"河北省", open:true},
    		{id:41, pId:4, name:"石家庄"},
    		{id:42, pId:4, name:"保定"},
    		{id:43, pId:4, name:"邯郸"},
    		{id:44, pId:4, name:"承德"},
    		{id:5, pId:0, name:"广东省", open:true},
    		{id:51, pId:5, name:"广州"},
    		{id:52, pId:5, name:"深圳"},
    		{id:53, pId:5, name:"东莞"},
    		{id:54, pId:5, name:"佛山"},
    		{id:6, pId:0, name:"福建省", open:true},
    		{id:61, pId:6, name:"福州"},
    		{id:62, pId:6, name:"厦门"},
    		{id:63, pId:6, name:"泉州"},
    		{id:64, pId:6, name:"三明"}
    	 ];
    ②.父子关联关系设置
    	var setting = {
    		check: {
    			enable: true,
    			chkboxType: {"Y":"s", "N":"s"}
    		}
    	};
    ③.取消默认双击展开父节点的功能
    	var setting = {
    		view: {
    			dblClickExpand: false
    		}
    	}
    
    ④. 初始化的数据设置 默认为勾选状态 checked:true
    	var nodes = [
    	{ "id":1, "name":"test1", checked:true },
    	{ "id":2, "name":"test2", checked:true }
    	]
    ⑤.获取第一个根节点的勾选状态
    	var treeObj = $.fn.zTree.getZTreeObj("tree");
    	var checked =  treeObj.getNodes()[0].checked;
    
    ⑥.点击文字也可以CheckBox 选中 
    var setting = {
    			callback:{
    				beforeClick: beforeClick
    			}
    	};
    function beforeClick(treeId, treeNode) {
    	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    	zTree.checkNode(treeNode, !treeNode.checked, null, true);
    	return false;
    }

1.pId 设置级别，没有pid 就是同级

![20190110192141111.png][]

[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[API]: http://www.treejs.cn/v3/api.php
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/fa029a07336b46f79917225a507a6832.png
[20190110192141111.png]: /images/20210813/5c4411bb360e428d85b21a3ffd0ae399.png