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