js树插件zTree获取所有选中节点数据的方法
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下：
由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用zTree在项目中。这个获取所有选中节点数据很简单。看一下API就能看懂了。所以我就直接上代码了。
<!DOCTYPEhtml>
<HTML>
<HEAD>
<TITLE>ZTREEDEMO-StandardData</TITLE>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<linkrel="stylesheet"href="css/zTreeStyle/zTreeStyle.css"type="text/css">
<linkrel="stylesheet"href="css/demo.css"type="text/css">
<scripttype="text/javascript"src="js/jquery-1.4.4.min.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.core-3.4.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.excheck-3.4.js"></script>
<!--
<scripttype="text/javascript"src="js/jquery.ztree.exedit-3.4.js"></script>-->
<SCRIPTtype="text/javascript">
<!--
varsetting={
check:{
enable:true
},
/*data:{
simpleData:{
enable:true
}
}*/
data: {
simpleData:{
enable:true
}
},
callback:{
onCheck:onCheck
}
};
varzNodes=[ {id:1,pId:0,name:"随意勾选1",open:false}, {id:11,pId:1,name:"随意勾选1-1",open:true}, {id:111,pId:11,name:"随意勾选1-1-1"}, {id:112,pId:11,name:"随意勾选1-1-2"}, {id:12,pId:1,name:"随意勾选1-2",open:true}, {id:121,pId:12,name:"随意勾选1-2-1"}, {id:122,pId:12,name:"随意勾选1-2-2"}, {id:2,pId:0,name:"随意勾选2", open:false}, {id:21,pId:2,name:"随意勾选2-1"}, {id:22,pId:2,name:"随意勾选2-2",open:true}, {id:221,pId:22,name:"随意勾选2-2-1"}, {id:222,pId:22,name:"随意勾选2-2-2"}, {id:23,pId:2,name:"随意勾选2-13"} ];
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"),setting,zNodes); }); functiononCheck(e,treeId,treeNode){ vartreeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; for(vari=0;i<nodes.length;i++){ v+=nodes[i].name+","; alert(nodes[i].id);//获取选中节点的值 } } //--> </SCRIPT> </HEAD> <BODY> <divclass="zTreeDemoBackgroundleft"> <ulid="treeDemo"class="ztree"></ul> </div> </BODY> </HTML>