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
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论