ZTree的使用

来源：互联网发布：进出口总额英文数据编辑：程序博客网时间：2024/05/21 11:19

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   var setting = {check: {
       enable: true, // 是否显示checkbox
       autoCheckTrigger: true//关联子节点选择 ps：没有什么效果
   }};
   var zNodes = [
   {name:"美国", children:[{name:"孙子",children:[{name:"奥巴马"}, {name:"希拉里"}]}]
   },
   {name:"中国", open:false, children:[
      {name:"不接受"}, {name:"不参与"},{name:"不承认"}, {name:"不执行"}]},
   ];
   $(document).ready(function(){
     // zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);   //$表示方式
      zTreeObj =jQuery.fn.zTree.init(jQuery("#treeDemo"), setting, zNodes);   //jQuery表示方式两种都可以
      //$(".ztree>li>span.chk").hide();   //加上这个时显示效果如图2，主节点没有默认没有勾选框
   });
   function treeShowData(){
       var zTreeObj = jQuery.fn.zTree.getZTreeObj("treeDemo");//得到整个树形结构
       console.info(zTreeObj) //控制台输出
       var nodes = zTreeObj.getCheckedNodes();//得到选中的节点
       console.info("------"+nodes)
       for(var i=0; i<nodes.length; i++){   //遍历节点的值
           var nodeId = nodes[i].name;
           console.info(nodeId) //控制台输出
        }
   }
</SCRIPT>
</HEAD>
<BODY>
<div><input type='button' onclick='treeShowData()' value='按钮'/></div>
<div>
   <ul id="treeDemo" class="ztree"></ul> //树形结构显示位置
</div>
</BODY>
</HTML>

0 0