zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用
zTree 官网 http://www.treejs/v3/main.php#_zTreeInfo
1、zTree 官网下载 ztree
下载好后放到项目相关目录下
2、编写相关代码
引入相关js 、 css 文件，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
</head>
<body>
</body>
</html>上述代码中的 css 还可以引入如下两种、它们分别具有不同的样式
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />或
<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />本文，根据博主个人习惯引入metroStyle.css
快速实现一个简单的树，请看如下代码，相关配置说明已写在代码中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<!--
其他两种css风格样式
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
-->
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<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>
</body>
</html>
运行效果如下图
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<MenuTest> 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<String, Object> map = new HashMap<String, Object>();
map.put("menulists", menuTestMapper.getMenuTestList());
return map;
}
}html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<!--
其他两种css风格样式
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
-->
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<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:"http://localhost:8089/getMenuTestList",
async:true,
success:function(res){
zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树
zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
}
});
});
</script>
</body>
</html>
运行效果如下
4、设置默认选中节点
在开发中，有时我们需要默认选中一些节点。比如修改用户角色或权限时，就会有这样的需求，如何对ztree的节点进行默认选中，请看如下代码
var node = zTreeObj.getNodeByParam("id", 7);
zTreeObj.checkNode(node, true, false); 通过每一条节点数据的 id 进行设置
具体看如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<!--
其他两种css风格样式
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
-->
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<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:"http://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>
</body>
</html>
运行效果
其他内容可参考官网API
更多推荐
ztree 使用教程
发布评论