最简单zTree应用案例

来源:互联网 发布:php erp系统 编辑:程序博客网 时间:2024/03/29 13:57


<!DOCTYPE html><html lang="zh-cn"><head><title>index.html</title><meta charset="utf-8"><link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css"><script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script><script type="text/javascript"  src="zTree_v3/js/jquery.ztree.core-3.5.js"></script><style>body {background-color: white;margin: 0;padding: 0;text-align: center;}div,p,table,th,td {list-style: none;margin: 0;padding: 0;color: #333;font-size: 12px;font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;}#testIframe {margin-left: 10px;}</style><SCRIPT type="text/javascript">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);return true;}}}};var zNodes = [ {id : 1,pId : 0,name : "基本功能 ",open : false,}, {id : 101,pId : 1,name : "最简单的树 ",}, {id : 102,pId : 1,name : "最简单的树 ",file : "2.html"}, {id : 201,pId : 101,name : "配合 radio 的隐藏",file : "1.html"},{id : 2,pId : 0,name : "基本功能 ",open : false,}, {id:21,pId:2,name:"功能",file:"1.html"}];$(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");zTree.selectNode(zTree.getNodeByParam("id", 101));});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);}</SCRIPT></head><body><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="1.html"></IFRAME></TD></TR></TABLE></body></html>


完成项目下载地址http://download.csdn.net/detail/whzhaochao/7228709




0 0
原创粉丝点击