开发 系统 时,JavaScript树形菜单组件dTree经 常要用到,为了方便使用,我将其封装成了一个 PHP 函数 。
这样,只要控制传入的菜单数据 ,即可动态创建菜单树。
大家也可参看我的《Qee开源社区》论坛贴:http://qeephp.com/bbs/viewthread.php?tid=8468&highlight=dtree
1、dTree的下载 :
http://destroydrop.com/javascripts/tree/
/** * menu -- dTree 树形菜单函数 * * @param array $menus // 菜单数据(数组) * 菜单数据样板: * $menus = array( * array('menu_id' => 0, 'parent_id' => -1, 'name' => '首页'), * array('menu_id' => 1, 'parent_id' => 0, 'name' => 'Node 1'), * array('menu_id' => 2, 'parent_id' => 0, 'name' => 'Node 2', 'url' => 'example01.html'), * array('menu_id' => 3, 'parent_id' => 1, 'name' => 'Node 1.1'), * array('menu_id' => 4, 'parent_id' => 0, 'name' => 'Node 3', 'url' => 'example01.html'), * array('menu_id' => 5, 'parent_id' => 3, 'name' => 'Node 1.1.1'), * array('menu_id' => 6, 'parent_id' => 5, 'name' => 'Node 1.1.1.1', 'url' => 'example01.html'), * array('menu_id' => 7, 'parent_id' => 0, 'name' => 'Node 4', 'url' => 'example01.html'), * array('menu_id' => 8, 'parent_id' => 1, 'name' => 'Node 1.2', 'url' => 'example01.html'), * array('menu_id' => 9, 'parent_id' => 0, 'name' => 'My Pictures', 'title' => 'Pictures I\'ve taken over the years','','','img/imgfolder.gif'), * array('menu_id' => 10, 'parent_id' => 9, 'name' => 'The trip to Iceland', 'url' => 'example01.html', 'title' => 'Pictures of Gullfoss and Geysir'), * array('menu_id' => 11, 'parent_id' => 9, 'name' => 'Mom\'s birthday', 'url' => 'example01.html'), * array('menu_id' => 12, 'parent_id' => 0, 'name' => 'Recycle Bin', 'url' => 'example01.html', 'icon' => 'img/trash.gif'), * ); * menu_id: 表示当前节点的ID * parent_id: 表示当前节点的父节点的ID,根节点的值为 -1 * name: 节点要显示的文字 * url: 节点的Url * title: 鼠标移至该节点时节点的提示文本 * target: 点击节点时,在目标窗口打开链接,可以是 _blank,_parent,_self,_top,甚至 mainFrame * icon: 用做节点关闭时的图标,节点没有指定图标时使用默认值 * iconOpen: 用做节点打开时的图标,节点没有指定图标时使用默认值 * open: 节点的默认打开状态,true打开,false关闭(不过它会读cookie, 所以有时看不出效果) * 说明: menu_id、parent_id、name 三个参数为必需,不能忽略 * * @param array $confOpts // dTree 配置选项参数(数组) * $opts = array( * 'target' => 'true'|string, // 指定所有节点在新窗口中打开链接,默认为 true * 'folderLinks' => 'true', // 文件夹可链接,默认为 true * 'useSelection' => 'true', // 节点被选择时高亮显示,默认为 true * 'useCookies' => 'true', // 用Cookies保存树的当前状态,默认为 true * 'useLines' => 'true', // 创建带线的树,默认为 true * 'useIcons' => 'true', // 创建带有图标的树,默认为 true * 'useStatusText' => 'false', // 在底部的状态栏中显示节点名还是显示节点的url,默认为 false * 'closeSameLevel' => 'false', // 同级节点树只能展开一个,默认为 false * 'inOrder' => 'false', // 如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示,默认为 false * ); * * @return JavaScript 脚本代码 * * 使用方法: * * 1、在网页模版的<head></head>中插入下面代码: * * <head> * <link rel="StyleSheet" href="dtree.css" type="text/css" /> * <script type="text/javascript" src="dtree.js"></script> * </head> * * 2、在<body></body>中要显示菜单的地方,加入下面代码: * * <body> * <?php * $menus = array( ... ); * $opts = array( ... ); * echo menu($menus, $opts); * ?> * </body> * * @update:2009/08/09 * @author hegz * */ function menu(& $menus, $confOpts = null) { //$opts = array('target', 'folderLinks', 'useSelection', 'useCookies', 'useLines', 'useIcons', 'useStatusText', 'closeSameLevel', 'inOrder'); $output = ''; $output .= "<div class=\"dtree\">\n"; $output .= "<p><a href=\"javascript: d.openAll();\">全部展开</a> | <a href=\"javascript: d.closeAll();\">全部折叠</a></p>\n"; $output .= "<script type=\"text/javascript\">\n"; $output .= "<!--\n\n"; $output .= "d = new dTree('d');\n\n"; /** * 设置 dTree 配置选项值 */ if (isset($confOpts['target'])) { $output .= "d.config.target = {$confOpts['target']};\n"; } else { $output .= "d.config.target = true;\n"; } if (isset($confOpts['folderLinks'])) { $output .= "d.config.folderLinks = {$confOpts['folderLinks']};\n"; } else { $output .= "d.config.folderLinks = true;\n"; } if (isset($confOpts['useSelection'])) { $output .= "d.config.useSelection = {$confOpts['useSelection']};\n"; } else { $output .= "d.config.useSelection = true;\n"; } if (isset($confOpts['useCookies'])) { $output .= "d.config.useCookies = {$confOpts['useCookies']};\n"; } else { $output .= "d.config.useCookies = true;\n"; } if (isset($confOpts['useLines'])) { $output .= "d.config.useLines = {$confOpts['useLines']};\n"; } else { $output .= "d.config.useLines = true;\n"; } if (isset($confOpts['useIcons'])) { $output .= "d.config.useIcons = {$confOpts['useIcons']};\n"; } else { $output .= "d.config.useIcons = true;\n"; } if (isset($confOpts['useStatusText'])) { $output .= "d.config.useStatusText = {$confOpts['useStatusText']};\n"; } else { $output .= "d.config.useStatusText = false;\n"; } if (isset($confOpts['closeSameLevel'])) { $output .= "d.config.closeSameLevel = {$confOpts['closeSameLevel']};\n"; } else { $output .= "d.config.closeSameLevel = false;\n"; } if (isset($confOpts['inOrder'])) { $output .= "d.config.inOrder = {$confOpts['inOrder']};\n"; } else { $output .= "d.config.inOrder = false;\n\n"; } // 添加菜单 foreach ($menus as $menu) { if (!isset($menu['menu_id']) || !isset($menu['parent_id']) || !isset($menu['name'])) { //js_alert('传入的菜单数据项 menu_id、parent_id 或 name 可能不存在。'); echo '传入的菜单数据项 menu_id、parent_id 或 name 可能不存在。'; return false; } if (!isset($menu['url']) && !isset($menu['title']) && !isset($menus['target']) && !isset($menu['icon']) && !isset($menu['iconOpen']) && !isset($menu['open'])) { $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\");\n"; } else { if (!isset($menu['title']) && !isset($menus['target']) && !isset($menu['icon']) && !isset($menu['iconOpen']) && !isset($menu['open'])) { $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\");\n"; } else { if (!isset($menus['target']) && !isset($menu['icon']) && !isset($menu['iconOpen']) && !isset($menu['open'])) { if (!isset($menu['url'])) { $menu['url'] = ''; } $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\", \"{$menu['title']}\");\n"; } else { if (!isset($menu['icon']) && !isset($menu['iconOpen']) && !isset($menu['open'])) { if (!isset($menu['url'])) { $menu['url'] = ''; } if (!isset($menu['title'])) { $menu['title'] = ''; } $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\", \"{$menu['title']}\", '{$menu['target']}');\n"; } else { if (!isset($menu['iconOpen']) && !isset($menu['open'])) { if (!isset($menu['url'])) { $menu['url'] = ''; } if (!isset($menu['title'])) { $menu['title'] = ''; } if (!isset($menus['target'])) { $menu['target'] = ''; } $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\", \"{$menu['title']}\", '{$menu['target']}', '{$menu['icon']}');\n"; } else { if (!isset($menu['open'])) { if (!isset($menu['url'])) { $menu['url'] = ''; } if (!isset($menu['title'])) { $menu['title'] = ''; } if (!isset($menus['target'])) { $menu['target'] = ''; } if (!isset($menu['icon'])) { $menu['icon'] = ''; } $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\", \"{$menu['title']}\", '{$menu['target']}', '{$menu['icon']}', '{$menu['iconOpen']}');\n"; } else { if (!isset($menu['url'])) { $menu['url'] = ''; } if (!isset($menu['title'])) { $menu['title'] = ''; } if (!isset($menus['target'])) { $menu['target'] = ''; } if (!isset($menu['icon'])) { $menu['icon'] = ''; } if (!isset($menu['iconOpen'])) { $menu['iconOpen'] = ''; } $output .= "d.add({$menu['menu_id']}, {$menu['parent_id']}, \"{$menu['name']}\", \"{$menu['url']}\", \"{$menu['title']}\", '{$menu['target']}', '{$menu['icon']}', '{$menu['iconOpen']}', '{$menu['open']}');\n"; } } } } } } } // 创建菜单树 $output .= "\ndocument.write(d);\n\n"; $output .= "//-->\n"; $output .= "</script>\n"; $output .= "</div>\n"; return $output; } ?>
效果图:
参数说明及使用方法如下:
/** * menu -- dTree 树形菜单函数 * * @param array $menus // 菜单数据(数组) * 菜单数据样板: * $menus = array( * array('menu_id' => 0, 'parent_id' => -1, 'name' => '首页'), * array('menu_id' => 1, 'parent_id' => 0, 'name' => 'Node 1'), * array('menu_id' => 2, 'parent_id' => 0, 'name' => 'Node 2', 'url' => 'example01.html'), * array('menu_id' => 3, 'parent_id' => 1, 'name' => 'Node 1.1'), * array('menu_id' => 4, 'parent_id' => 0, 'name' => 'Node 3', 'url' => 'example01.html'), * array('menu_id' => 5, 'parent_id' => 3, 'name' => 'Node 1.1.1'), * array('menu_id' => 6, 'parent_id' => 5, 'name' => 'Node 1.1.1.1', 'url' => 'example01.html'), * array('menu_id' => 7, 'parent_id' => 0, 'name' => 'Node 4', 'url' => 'example01.html'), * array('menu_id' => 8, 'parent_id' => 1, 'name' => 'Node 1.2', 'url' => 'example01.html'), * array('menu_id' => 9, 'parent_id' => 0, 'name' => 'My Pictures', 'title' => 'Pictures I\'ve taken over the years','','','img/imgfolder.gif'), * array('menu_id' => 10, 'parent_id' => 9, 'name' => 'The trip to Iceland', 'url' => 'example01.html', 'title' => 'Pictures of Gullfoss and Geysir'), * array('menu_id' => 11, 'parent_id' => 9, 'name' => 'Mom\'s birthday', 'url' => 'example01.html'), * array('menu_id' => 12, 'parent_id' => 0, 'name' => 'Recycle Bin', 'url' => 'example01.html', 'icon' => 'img/trash.gif'), * ); * menu_id: 表示当前节点的ID * parent_id: 表示当前节点的父节点的ID,根节点的值为 -1 * name: 节点要显示的文字 * url: 节点的Url * title: 鼠标移至该节点时节点的提示文本 * target: 点击节点时,在目标窗口打开链接,可以是 _blank,_parent,_self,_top,甚至 mainFrame * icon: 用做节点关闭时的图标,节点没有指定图标时使用默认值 * iconOpen: 用做节点打开时的图标,节点没有指定图标时使用默认值 * open: 节点的默认打开状态,true打开,false关闭(不过它会读cookie, 所以有时看不出效果) * 说明: menu_id、parent_id、name 三个参数为必需,不能忽略 * * @param array $confOpts // dTree 配置选项参数(数组) * $opts = array( * 'target' => 'true'|string, // 指定所有节点在新窗口中打开链接,默认为 true * 'folderLinks' => 'true', // 文件夹可链接,默认为 true * 'useSelection' => 'true', // 节点被选择时高亮显示,默认为 true * 'useCookies' => 'true', // 用Cookies保存树的当前状态,默认为 true * 'useLines' => 'true', // 创建带线的树,默认为 true * 'useIcons' => 'true', // 创建带有图标的树,默认为 true * 'iconPath' => '' // 设置图标路径,默认为空 * 'useStatusText' => 'false', // 在底部的状态栏中显示节点名还是显示节点的url,默认为 false * 'closeSameLevel' => 'false', // 同级节点树只能展开一个,默认为 false * 'inOrder' => 'false', // 如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示,默认为 false * ); * * @return JavaScript 脚本代码 * * 使用方法: * * 1、在网页模版的<head></head>中插入下面代码: * * <head> * <link rel="StyleSheet" href="dtree.css" type="text/css" /> * <script type="text/javascript" src="dtree.js"></script> * </head> * * 2、在<body></body>中要显示菜单的地方,加入下面代码: * * <body> * <?php * require('dtreemenu.php'); * $menus = array( ... ); * $opts = array( ... ); * echo menu($menus, $opts); * ?> * </body> * * @update:2009/09/6 * @author hegz * */