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 = [
{id:1, pId:0, name:"[core] Basic Functions", open:false},
{id:101, pId:1, name:"Standard JSON Data", file:"core/standardData"},
{id:102, pId:1, name:"Simple JSON Data", file:"core/simpleData"}];
$(document).ready(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
//下面這段能夠放在其餘地方,好比配合搜索功能使用,搜索到節點ID而後觸發點擊事件
var treeNode=zTree.getNodeByParam("id", 301)
zTree.selectNode(treeNode);
if (treeNode.isParent) {
zTree.expandNode(treeNode);
} else {
demoIframe.attr("src",treeNode.file + ".html");
}
});
<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="core/standardData.html"></IFRAME></TD>
</TR>
</TABLE>