zTree的使用总结

zTree是开源的一个插件，它是一款JQuery实现的多功能“树型”列表插件。

使用

• 需要引入下面的库

  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

• 编写一个div

<div><ul id="treeDemo" class="ztree"></ul></div>

• 编写js

    var zTree ;  
    var setting = {  
        callback: {  
            onCheck: zTreeOnCheck,  
            onClick: zTreeOnClick  
        },  
        check:{  
            enable : true  
        }  
    };  
    $.ajax({  
        url:"/hrm/GetJson",  
        type:"get",  
        data:{},  
        dataType:"jsonp",  
        jsonp:"callBackJsonp",  
        success : success,  
        error : function(a,b,c){  
            alert("error"+c);  
        }  
    });  
    function success(nodes){  
        zTree = $.fn.zTree.init($("#treeDemo"), setting, nodes);  
    }  
    function zTreeOnCheck(event,treeNode,treeId){  
        alert("checked");  
    }  
    function zTreeOnClick(event,treeNode,treeId){  
        alert("Clicked");  
    }  
    function getTree(){  
        return zTree;  
    }  
    /*  
    // nodes样式  
    var nodes = [  
    {id:1, pId:0, name: "父节点1"},  
    {id:11, pId:1, name: "子节点1"},  
    {id:12, pId:1, name: "子节点2"}  
    ];  
    */  

• 关于后台数据

由于跨域请求，所以用了jsonp，如果不跨域可以去掉，后台使用JSONObject和JSONArray拼的JSON串返回到界面并不能被zTree解析(自己当时做的时候是这样的)，用list拼为nodes,再使用out.println(nodes);

    arrayList.put("{id:12, pId:1, name: "子节点2"}");

问题

• 在父窗体上如何触发子窗体的zTree的onCheck方法

  1. 在父窗体使用js获取子窗体对象，parent.$(“#iframeID”).get(0).contentWindow; get(0)将Jquery对象转换为普通的js对象!!!

  2. 在子窗体定义一个获取zTree的方法getTree()，获取到子窗体调用getTree()方法拿到对象，之后相干啥就可以干了。获取选中的节点是getChangeCheckedNodes()

• 我怎么知道zTree有getChangeCheckedNodes

  1. 教给你一个办法，获取zTree对象，用console.log(zTree)。在控制台就可以看到zTree有什么方法了！