//解析树
<div class="content_wrap" style=" 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;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