一.快速使用

1.导包

在想要使用Ztree的页面中导入以下两个文件

在这里插入图片描述

<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>

2.设置显示的位置

在页面中写一个ul标签，使其class的值为ztree
整个标签就是生成的ztree的内容所附着的静态标签

 <div class="panel-body">
         `<%--     这个ul标签是ztree生成的动态节点所附着的静态节点    --%>
     <ul id="treeDemo" class="ztree">

     </ul>`
 </div>

3.开启使用

准备一个名为setting的JSON类型的数组
准备一个树形结构的根节点

// $("#treeDemo"):静态节点的id值
// setting:JSON类型的数组,里面包含一系列的设置
// root:一个树形结构的根节点，或者是树形结构的json数组
 $.fn.zTree.init($("#treeDemo"),setting,root);

二.setting中的一些常用设置

1.两个重要参数treeId和treeNode

treeId：是整个树形结构附着的 ul 标签的 id:例如(treeDemo)
treeNode：当前树形节点的全部的数据，包括从后端查询得到的 Menu 对象的全部属性

2.修改默认的图标

对setting下的view下的addDiyDom进行设置即可
给addDiyDom属性设置一个函数
在函数中使用treeNode获取到节点中span的id值，通过修改class的值达到修改图标的功能
zTreeNode节点中的id值都是treeNode.tId+“一些特殊值”
比如:

var setting = {
	view:{
		addDiyDom:myDiyDom
	}
}

function myDiyDom(treeId,treeNode){
// zTree 生成 id 的规则
// 例子：treeDemo_7_ico
// 解析：ul 标签的 id_当前节点的序号_功能
// 提示：“ul 标签的 id_当前节点的序号”部分可以通过访问 treeNode 的 tId 属性得到
// 根据 id 的生成规则拼接出来 span 标签的 id
	var spanId = treeNode.tId + "_ico";


// 根据控制图标的 span 标签的 id 找到这个 span 标签
// 删除旧的 class
// 添加新的 class
	$("#"+spanId)
			.removeClass()
			.addClass(treeNode.icon);
}

3.修改点击后不跳转

在这里插入图片描述

直接在setting下的data下的key中的url，随意给一个值即可

var setting = {
	data:{
		key:{
			url:"dog"
		}	
	}
}

4.设置鼠标移入移出后的效果

在setting下的view下设置addHoverDom即可设置鼠标移入效果
在setting下的view下设置removeHoverDom即可设置鼠标移出效果

var setting = {
	view:{
		addHoverDom:myAddHoverDom,
		removeHoverDom:myRemoveHoverDom
	}
}

5.设置全部节点打开

获取到Ztree的对象，然后调用expandAlll(true)即可

// 获取到Ztree的对象
 var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

 // 打开所有的节点
 zTreeObj.expandAll(true);

三.直接发送List类型的数据进行展示

从服务器端查询到的 list 不需要组装成树形结构，这里我们交给 zTree 去组装

1.开启简单的JSON功能

把setting下的data下的simpleData中的enable设置为true即可

 var setting = {
     data:{
         // 开启简单JSON功能
         simpleData: {
           enable:true,
         },
     },
 };

2.改变默认的pid

修改setting下的data下的simpleData中的pIdKey属性即可

    var setting = {
        data:{
            // 开启简单JSON功能
            simpleData: {
              enable:true,
                // 使用 categoryId 属性关联父节点，不用默认的 pId 了
                // 这个categoryId也是可以改成直接喜欢的
                pIdKey: "categoryId"
            },
        },
    };

3.改变默认的name显示

修改setting下的data下的key中的name属性即可

    var setting = {
        data:{
            key:{
                // 使用 title 属性显示节点名称，不用默认的 name 作为属性名了
                name:"title",
            },
        },
    };

4.开启多选框

修改setting下的check中的enable属性为true即可

    var setting = {
        check:{
            // 开启多选框的选项
            enable: true
        }
    };

5.多选框的一些设置

①设置多选框为选中

使用Ztree对象获取到单独的一个Node对象
checked属性:指定多选框是否为选中
checkTypeFlag属性:checkTypeFlag 设置为 false，表示不“联动”，不联动是为了避免把不该勾选的勾选上,比如是否会关联到父级
使用Ztree对象的checkNode(Node对象,checked属性，checkTypeFlag属性);

var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

var currentNode = zTreeObj.getNodeByParam("id","5");

// 将checked属性设置为true
var checked = true;

// checkTypeFlag 设置为 false，表示不“联动”，不联动是为了避免把不该勾选的勾选上
// 就是不会勾选到父级
var checkTypeFlg = false;

// 设置自动勾选
zTreeObj.checkNode(currentNode,checked,checkTypeFlg);

②获取到多选框中全部的选中对象

使用Ztree对象的getCheckedNodes()即可

 // 1.获取到Ztree的对象
 var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

 // 2.获取全部被勾选的节点
 var checkedNodes = zTreeObj.getCheckedNodes();

javascript 前端前端

ZTree的简单使用