ztree使用（二） 前端解析

　　
　　//解析树
　　<div class="content_wrap" style="width: 20%;height:100%;border-right:1px #000000 solid;position:fixed;">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
　　//右侧展示列表
    <iframe id="dataframe" src="url?parentCode=0" style="height:800px;width:84%;margin-left:21%;padding: 10px;border:0;scrolling : no;"></iframe>//加载树

    var setting = {
        view: {
            showIcon: false
        },
        async : {
            enable : true,
            type : "post",
            url : "url",//获取数据
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pidKey : "pId",
                rootPId : 0
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    }; 
    $.fn.zTree.init($("#treeDemo"), setting);
    
    function zTreeOnClick() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        var childCode = nodes[0].id;//节点code  父节点id nodes[0].pId
　　　　 //点击节点请求后台获取该节点下的子节点数据并在右侧列表中展示
　　　　 document.getElementById("dataframe").src="url?parentCode="+childCode;
    };

页面的效果

 

需要引用的js