`
hegz
  • 浏览: 442823 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

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

    博客分类:
  • PHP
阅读更多

开发 系统 时,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
*
*/
 

 

  • 大小: 24.4 KB
  • dtree.zip (21.4 KB)
  • 描述: 内含test.php
  • 下载次数: 127
  • dtreemenu.zip (2.6 KB)
  • 描述: dtree菜单函数文件
  • 下载次数: 79
  • test.zip (3 KB)
  • 描述: 测试文件
  • 下载次数: 72
2
0
分享到:
评论

相关推荐

    jsp树形菜单 dtree tree 树形菜单

    在这个“jsp树形菜单 dtree tree 树形菜单”的项目中,我们将探讨如何利用JSP、dtree库以及可能的Struts框架来创建一个动态的树形菜单。 首先,JSP(JavaServer Pages)是一种基于Java的技术,用于创建动态Web内容...

    树形菜单dtree

    在本篇文章中,我们将深入探讨树形菜单dtree的原理、应用以及实现方法。 1. 原理: 树形菜单的核心是数据结构中的树。每个节点都可以有零个或多个子节点,这样的结构允许无限级的分类。在dtree中,通常使用递归的...

    动态树形菜单DTree

    动态树形菜单(DTree)是一种用户界面元素,常用于数据结构展示,特别是层次结构数据,如文件系统、组织架构或数据库分类等。在Web应用和桌面应用中,它能够帮助用户以直观的方式浏览和操作多层级的数据。DTree的...

    dtree写的动态树形菜单

    有了数据结构后,我们调用dtree的初始化函数,将树形数据和DOM元素绑定在一起: ```javascript var tree = new dTree('tree', document.getElementById('menuContainer')); tree.init(treeData); ``` 这里,'tree'...

    javascript树形菜单Dtree插件

    用户可以通过JSON或其他数据格式提供数据源,Dtree会自动将其转换成可交互的树形菜单。此外,它还支持动态加载子节点,提高页面性能,尤其是在处理大量数据时。 **Dtree的主要功能:** 1. **多级展开与折叠**:...

    树形菜单DTree使用小记

    本文将深入探讨“树形菜单DTree”的使用,以及如何通过源码和工具进行操作。由于没有提供具体的描述,我们将根据标题和标签来构建相关知识点。 **一、树形菜单的概念** 树形菜单,顾名思义,是以树状结构展示数据的...

    改进的多级树形菜单dtree,eclipse开发。mysql数据库,S2SH架构—(1)

    改进的多级树形菜单dtree,eclipse开发。mysql数据库,S2SH架构,有源码和jar包。 共两部分。这是第一部分

    js树形菜单dtree

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,而“dtree”是一个专门用于创建树形菜单的JS组件。树形菜单在用户界面设计中非常常见,它能帮助用户以层级结构浏览和操作数据,尤其...

    dTree 生成无限级树形菜单

    本篇文章将深入探讨如何利用`dTree`来生成动态的树形菜单,并结合后台Action中的List数据进行操作。 首先,我们需要理解`dTree`的基本概念。`dTree`是一个基于JavaScript的开源库,它提供了一种简单的方式来创建...

    dtree树形菜单(有带checkbox实现)

    本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql 菜单既有普通的树结构展示,也有...

    封装的dTree.js文件动态创建树形菜单

    本篇文章将详细讲解如何利用封装的dTree.js文件,结合EL(Expression Language)表达式来动态创建树形菜单。 dTree.js是一个轻量级的JavaScript库,专门用于构建交互式的树形菜单。它提供了丰富的API和配置选项,...

    dtree、JavaScript编写成的简单的树形菜单组件

    dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。 dtree 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 ...

    改进的多级树形菜单dtree,eclipse开发。mysql数据库,S2SH架构—(2)

    改进的多级树形菜单dtree,eclipse开发。mysql数据库,S2SH架构,有源码和jar包。 共两部分。这是第二部分

    DTree较好的树形菜单js控件

    **DTree较好的树形菜单js控件** 在Web开发中,树形菜单是一种常见的交互元素,用于展示层次结构的数据,例如网站导航、文件系统或组织结构。DTree是一款优秀的JavaScript控件,专为生成动态、交互式的树形菜单而...

    dtree+jquery 动态实现无限树形菜单 (包括增删改查)

    本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单,并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件,它提供了丰富的API和灵活的配置选项,使得在网页上创建交互式树形菜单变得简单易行。 首先...

    树形菜单 -- 如何调用dtree里的函数来写树形菜单

    如何调用dtree里的函数来写树形菜单,最近自己也在写树形菜单,发现这个dtree挺好,推荐下大家如果项目当中使用了树形菜单的话,那么这个就是其中的一个选择。

Global site tag (gtag.js) - Google Analytics