zTree获取所有选中节点数据的方法

zTree获取选中节点数据实现

本文介绍了一种使用zTree插件获取所有选中节点数据的方法，供读者参考。

初次接触Tree类组件时，zTree因其由国内开发者编写且提供完整的中文API文档，获得了良好的评价，因此被尝试应用于实际项目中。获取选中节点数据的功能实现较为直观，参考API即可掌握，下面直接展示相关代码实现。

<!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:"随意勾选 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);
 });
 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); //获取选中节点的值
 }
 }
 //-->
 </SCRIPT>
</HEAD>
<BODY>
<div class="zTreeDemoBackground left">
 <ul id="treeDemo" class="ztree"></ul>
 </div>
</BODY>
</HTML>

希望本文提供的代码示例对JavaScript程序设计有所帮助。