将树形菜单dTree封装成PHP函数

bco 发表于 2017-4-10 11:41:26

开发
系统
时，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";
$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
*
*/

页: [1]

运维网's Archiver

将树形菜单dTree封装成PHP函数