地址
官网：http://ztree.me
码云：https://gitee.com/zTree/zTree_v3
可以实现效果
使用方式
下载资源文件，引入到自己的项目中
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>通过阅读API文档进行编码
实现简单的一棵树
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<!--创建放置树的容器-->
<ul id="ztree1" class="ztree">
</ul>
</body>
<script>
$(function() {
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id",//id标识 可以修改为数据库对应字段
pIdKey: "pId",//父级id
rootPId: 0,//根节点id
}
}，
//设置点击事件
callback:{
onClick:function(event,treeId,treeNode,clickFlag){
console.log(treeNode.name)
}
}
}
//树节点数据
var zNodes1 = [{
"id": 1,
"pId": 0,
"name": "菜单一"
},
{
"id": 101,
"pId": 1,
"name": "菜单一子菜单一"
},
{
"id": 102,
"pId": 1,
"name": "菜单一子菜单二"
},
{
"id": 2,
"pId": 0,
"name": "菜单二"
},
{
"id": 201,
"pId": 2,
"name": "菜单二子菜单一"
},
{
"id": 202,
"pId": 2,
"name": "菜单二子菜单二"
},
{
"id": 3,
"pId": 0,
"name": "菜单三"
},
];
//初始化第一个树
$.fn.zTree.init($("#ztree1"),setting1,zNodes1)
})
</script>实现一个可以勾选的树
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id", //id标识 可以修改为数据库对应字段
pIdKey: "pId", //父级id
rootPId: 0, //根节点id
}
},
//设置点击事件
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
console.log(treeNode.name)
}
},
check: {
enable: true,//是否显示 checkbox/radio
chkStyle: "radio",//设置显示类型 值可选：radio/checkbox
}
}
function getCheckedNode(){
//获取选中的数据
//获取指定id的tree对象
var treeObj = $.fn.zTree.getZTreeObj("ztree1");
//获取选中的数据
var checkedNods = treeObj.getCheckedNodes();
console.log(checkedNods)
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<!--创建放置树的容器-->
<ul id="ztree1" class="ztree">
</ul>
<button onclick="getCheckedNode()">获取已选的数据</button>
</body>
<script>
$(function() {
//树节点数据
var zNodes1 = [{
"id": 1,
"pId": 0,
"name": "菜单一"
},
{
"id": 101,
"pId": 1,
"name": "菜单一子菜单一"
},
{
"id": 102,
"pId": 1,
"name": "菜单一子菜单二"
},
{
"id": 2,
"pId": 0,
"name": "菜单二"
},
{
"id": 201,
"pId": 2,
"name": "菜单二子菜单一"
},
{
"id": 202,
"pId": 2,
"name": "菜单二子菜单二"
},
{
"id": 3,
"pId": 0,
"name": "菜单三"
},
];
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id", //id标识 可以修改为数据库对应字段
pIdKey: "pId", //父级id
rootPId: 0, //根节点id
}
},
//设置点击事件
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
console.log(treeNode.name)
}
},
check: {
enable: true, //是否显示 checkbox/radio
chkStyle: "radio", //设置显示类型 值可选：radio/checkbox
}
}
//初始化第一个树
$.fn.zTree.init($("#ztree1"), setting1, zNodes1);
})
function getCheckedNode() {
//获取选中的数据
//获取指定id的tree对象
var treeObj = $.fn.zTree.getZTreeObj("ztree1");
//获取选中的数据
var checkedNods = treeObj.getCheckedNodes();
console.log(checkedNods)
}
</script>
</html>