zTree+php动态加载menu
2014-04-22 17:11
309 查看
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.结果
相关文章推荐
- zTree+php动态加载menu
- PHP intl扩展安装/ext/php_intl.dll文件无法动态加载的问题
- javascript树形菜单(一):Tigra Tree Menu,实现动态数据加载
- 通过源码包php-5.4.9.tar.gz编译安装PHP之后,如何加载动态模块,不需要重新配置PHP
- 使用PHP+AJAX让WordPress动态加载文章的教程
- 从给编译好的LAMP环境中的PHP添加Xdebug模块分析动态加载
- php+ajax实现无刷新动态加载数据技术 - 测试用了,效果还行
- php+ajax实现无刷新动态加载数据技术
- 使用php在页面输出时,动态加载合并压缩js
- [一个星期自学安卓]动态加载菜单Menu
- PHP动态加载html文件之后<head>中内容全部移动到<body>中导致页面头部存在空白
- php动态加载模块的时候出现PHP_FE_END’未声明(不在函数内) -----{error: ‘PHP_FE_END’ undeclared here (not in a function)}
- zhphp framework (七) 配置文件加载与读取以及动态写、读配置文件
- Menu动态加载数据
- Menu动态加载数据
- 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间
- apache和php动态加载模块
- nginx php动态编译加载模块.
- 使用PHP+AJAX让WordPress动态加载文章的教程
- Ext:Ext.menu.Menu动态加载菜单