This article example describes the method of obtaining all selected node data by js tree plug-in zTree. Share it for your reference. The specific analysis is as follows:
Because I'm new to the Tree side of things. I saw zTree online, written by Chinese. So the API must be in Chinese. And the comments are good too. So try using zTree in the project. This is easy to obtain all selected node data. Just look at the API to understand. So I just uploaded the code.
Copy the code as follows: <!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Standard Data </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>
<!--
<script type="text/javascript" src="js/jquery.ztree.exedit-3.4.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
check:{
enable:true
},
/*data: {
simpleData: {
enable: true
}
}*/
data: {
simpleData:{
enable:true
}
},
callback:{
onCheck:onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"Check 1 at will", open:false},
{ id:11, pId:1, name:"Check 1-1 at will", open:true},
{ id:111, pId:11, name:"Check 1-1-1"},
{ id:112, pId:11, name:"Check 1-1-2 at will"},
{ id:12, pId:1, name:"Check 1-2 at will", open:true},
{ id:121, pId:12, name:"Check 1-2-1 at will"},
{ id:122, pId:12, name:"Check 1-2-2 at will"},
{ id:2, pId:0, name:"Check 2 at will", open:false},
{ id:21, pId:2, name:"Check 2-1 at will"},
{ id:22, pId:2, name:"Check 2-2 at will", open:true},
{ id:221, pId:22, name:"Check 2-2-1 at will"},
{ id:222, pId:22, name:"Check 2-2-2"},
{ id:23, pId:2, name:"Check 2-13 at will"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //Get the value of the selected node
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo"></ul>
</div>
</BODY>
</HTML>
I hope this article will be helpful to everyone's JavaScript programming.