<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="./zTree_v3/js/jquery-1.4.4.min.js" ></script>
<link rel="stylesheet" href="./zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<!--
其他两种css风格样式
<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./zTree_v3/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
-->
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.all.min.js" ></script>
</head>
<body>
<div>
<ul id="treeInfo" class="ztree"></ul>
</div>
<button id="getAllnode">获取选中的节点</button>
<script>
var settingss = {
data: {
simpleData: {
enable: true,//true 、 false 分别表示 使用 、 不使用 简单数据模式
idKey: "id",//节点数据中保存唯一标识的属性名称
pIdKey: "parentId",//节点数据中保存其父节点唯一标识的属性名称
rootPId: -1,//用于修正根节点父节点数据，即 pIdKey 指定的属性值
},
key: {
name: "menuName"//zTree 节点数据保存节点名称的属性名称 默认值："name"
}
},
check:{
enable:false,//true 、 false 分别表示 显示 、不显示 复选框或单选框
nocheckInherit:true,//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
},
callback:{
onClick:chooseNode,//点击单个节点事件
}
};
//点击单个节点事件
function chooseNode(event,treeId,treeNode){
console.log(treeNode);
alert("节点id:"+treeNode.id+",节点名称:"+treeNode.menuName+",父节点id:"+treeNode.parentId);
}
//数据
var zNodes = [
//注意，数据中的 menuName 必须与settingss中key中定义的name一致，否则找不到
{id:1,menuName:"父节点1", open:true, children:[
{id:3,menuName:"子节点3"}, {id:4,menuName:"子节点4"}]},
{id:2,menuName:"父节点2", open:true, children:[
{id:5,menuName:"子节点5"}, {id:6,menuName:"子节点6"}]}
];
zTreeObj = $.fn.zTree.init($("#treeInfo"), settingss, zNodes); //初始化树
zTreeObj.expandAll(true);//true节点全部展开、false节点收缩
</script>
<script type="text/javascript">
//获取选中节点的值
$("#getAllnode").click(function(){
var treeObj = $.fn.zTree.getZTreeObj("treeInfo");
var nodes = treeObj.getCheckedNodes(true);
console.log(nodes);
});
</script>
</body>
</html>
网友评论