地址
官网：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>