zTree+php动态加载menu

系统管理员 2022-08-27 00:29 179阅读 0赞

# 1.前端代码 #

<!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 menuNode;
    	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;
    				}
    			}
    		}
    	};
    
         
    	$(function(){
    		$.post("src/dao/conn.php", function(data){
    			menuNode=$.parseJSON(data);
    			for(var i=0;i<menuNode.length;i++){
    				 menuNode[i].name=decodeURI(menuNode[i].name);
    			}
    			var t = $("#tree");
    			t = $.fn.zTree.init(t, setting, menuNode);
    			demoIframe = $("#testIframe");
    			demoIframe.bind("load", loadReady);
    			console.info(menuNode);
    		});
    	});
    	   
    	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="php/1.html"></IFRAME></TD>
    		</TR>
    	</TABLE>
    </body>
    </html>

# 2.后台conn.php代码 #

<?php
    $mysqli  = new  mysqli ( 'localhost' ,  'root' ,  'root' ,  'php' );
    mysqli_query($mysqli, "set names gbk");
    if ( $mysqli -> connect_error ) {
        die(  $mysqli -> connect_errno + $mysqli -> connect_error );
    }
    $sql='select * from menu';
    $res=mysqli_query($mysqli, $sql);
    $array=array();
    while ($row=mysqli_fetch_row($res)){
    	$menu=array(
    		"id"=>$row[1],
    		"pId"=>$row[0],
    		"name"=>urlencode(iconv('gb2312','utf-8',$row[2])),
    		"open"=>$row[3],
    		"file"=>$row[4],	
    	);
    	array_push($array, $menu);
    }
    echo json_encode($array);
    
     $mysqli -> close ();
    	
    ?>

# 3.数据库表内容 #

mysql> select * from menu;
    +------+-----+---------+------+------------+
    | pId  | id  | name    | open | file       |
    +------+-----+---------+------+------------+
    | NULL |   1 | 最简单        |    0 | NULL       |
    | NULL |   2 | 简单        |    0 | NULL       |
    | NULL |   3 | 超简单        | NULL | NULL       |
    |    2 |  21 | 案例3       | NULL | php/1.html |
    |    1 | 101 | 简单        | NULL | NULL       |
    |    1 | 102 | 案例2       | NULL | php/2.html |
    |  101 | 201 | 案例1       | NULL | php/1.html |
    |    3 | 301 | 超简单1       | NULL | php/1.html |
    +------+-----+---------+------+------------+
    8 rows in set (0.00 sec)

# 4.结果 #

![Center][]

[Center]: /images/20220824/c2358d18479c46ec99aacf563c5b0939.png