zTree源码调试
html
注意class一定要为ztree
如果要引用其中的样式和图标，在css里面的图片路径以及拿过来的资源路径最后不要更改，不然很难找到。
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px SRC="">
</IFRAME>
</TD>
</TR>
</TABLE>
js代码
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback:{
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if(treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
}else{
demoIframe.attr("src",treeNode.file + ".html");
return true;
}
}
}
};
var zNodes = [];//初始化目录，所有的目录都是页面加载的时候完成，通过同步ajax
$(document).ready(function(){
$.ajax({
async:false,//阻塞，ajax没执行完不会往下执行
dateType:"json",
url:"admin/v_ztree",
success:function(date){//返回的是json串
console.log(date);
date = eval(date);//一定要把string类型的json串转化为object类型的json不然读取不到
console.log(date);
zNodes = date;
},
error:function(){
alert("数据加载不成功");
}
});
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 1));
});
function loadReady(){
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH:maxH ;
if (h < 530) h = 530;
demoIframe.height(h);
}