ztree 使用教程

ztree 是一个依靠 jquery 实现的多功能 “树插件”。被广泛应用在的权限管理中

1、ztree 官网下载 ztree

下载好后放到项目相关目录下

2、编写相关代码

引入相关js 、 css 文件，代码如下:

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>

上述代码中的 css 还可以引入如下两种、它们分别具有不同的样式

或

本文，根据博主个人习惯引入metrostyle.css

快速实现一个简单的树，请看如下代码，相关配置说明已写在代码中

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>

<script> var settingss = { data: { simpledata: { enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式 idkey: "id", //节点数据中保存唯一标识的属性名称 pidkey: "parentid", //节点数据中保存其父节点唯一标识的属性名称 rootpid: -1 //用于修正根节点父节点数据，即 pidkey 指定的属性值 }, key: { name: "menuname" //ztree 节点数据保存节点名称的属性名称 默认值："name" } }, check:{ enable:true, //true 、 false 分别表示 显示 、不显示 复选框或单选框 nocheckinherit:true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true } }; //数据 var znodes = [ //注意，数据中的 menuname 必须与 settingss 中key 中定义的name一致，否则找不到 {menuname:"父节点1", open:true, children:[ {menuname:"子节点1"}, {menuname:"子节点2"}]}, {menuname:"父节点2", open:true, children:[ {menuname:"子节点3"}, {menuname:"子节点4"}]} ]; ztreeobj = $.fn.ztree.init($("#treedemo"), settingss, znodes); //初始化树 ztreeobj.expandall(true); //true 节点全部展开、false节点收缩 </script>

运行效果如下图

3、使用ajax获取数据

实际项目开发中，数据往往是从后台服务器获取的，而不是在前端写死的。如何实现ajax获取数据，请看如下代码

表结构及数据如下

后台接口代码如下

mapper层

import java.util.list;
import org.apache.ibatis.annotations.select;
import com.che.pri.bean.menutest;

public interface menutestmapper {
	
	@select("select id as id, parent_id as parentid, menu_name as menuname from menu_test")
	list getmenutestlist();

}

controller层

import java.util.hashmap;
import java.util.map;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.responsebody;
import com.che.pri.mapper.menutestmapper;
@controller
public class menutestcontroller {
	
	@autowired
	private menutestmapper menutestmapper;

	@responsebody
	@requestmapping("/getmenutestlist")
	public object getmenutestlist() {
		map map = new hashmap();
		map.put("menulists", menutestmapper.getmenutestlist());
		return map;
	}
	
}

html代码如下

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>

<script> var settingss = { data: { simpledata: { enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式 idkey: "id", //节点数据中保存唯一标识的属性名称 pidkey: "parentid", //节点数据中保存其父节点唯一标识的属性名称 rootpid: -1 //用于修正根节点父节点数据，即 pidkey 指定的属性值 }, key: { name: "menuname" //ztree 节点数据保存节点名称的属性名称 默认值："name" } }, check:{ enable:true, //true 、 false 分别表示 显示 、不显示 复选框或单选框 nocheckinherit:true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true } }; $(document).ready(function(){ $.ajax({ type:"get", url:"https://localhost:8089/getmenutestlist", async:true, success:function(res){ ztreeobj = $.fn.ztree.init($("#treedemo"), settingss, res.menulists); //初始化树 ztreeobj.expandall(true); //true 节点全部展开、false节点收缩 } }); }); </script>

运行效果如下

4、设置默认选中节点

在开发中，有时我们需要默认选中一些节点。比如修改用户角色或权限时，就会有这样的需求，如何对ztree的节点进行默认选中，请看如下代码

 var node = ztreeobj.getnodebyparam("id", 7);
 ztreeobj.checknode(node, true, false); 

通过每一条节点数据的 id 进行设置

具体看如下代码

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>

<script> var settingss = { data: { simpledata: { enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式 idkey: "id", //节点数据中保存唯一标识的属性名称 pidkey: "parentid", //节点数据中保存其父节点唯一标识的属性名称 rootpid: -1 //用于修正根节点父节点数据，即 pidkey 指定的属性值 }, key: { name: "menuname" //ztree 节点数据保存节点名称的属性名称 默认值："name" } }, check:{ enable:true, //true 、 false 分别表示 显示 、不显示 复选框或单选框 nocheckinherit:true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true } }; $(document).ready(function(){ $.ajax({ type:"get", url:"https://localhost:8089/getmenutestlist", async:true, success:function(res){ ztreeobj = $.fn.ztree.init($("#treedemo"), settingss, res.menulists); //初始化树 ztreeobj.expandall(true); //true 节点全部展开、false节点收缩 //设置选中节点 var node = ztreeobj.getnodebyparam("id", 7); ztreeobj.checknode(node, true, false); var node = ztreeobj.getnodebyparam("id", 1); ztreeobj.checknode(node, true, false); var node = ztreeobj.getnodebyparam("id", 4); ztreeobj.checknode(node, true, false); } }); }); </script>

运行效果

其他内容可参考官网api