`
wei5201
  • 浏览: 187253 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

oracle树形结构,结合dtree插件使用显示树状结构菜单

    博客分类:
  • js
阅读更多
1.首先说明下数据库的结构,见图片:



接着看下查询树形结构的语句吧:
SELECT id, parentid, NAME, url
        FROM (SELECT id,
               nvl(parent_id, -1) AS parentid,
               NAME,
               url,
               sys_connect_by_path(order_id, '-') rowno
          FROM tls_menu
         WHERE is_enable = 'Y'
        CONNECT BY PRIOR id = parent_id
         START WITH id = 1)
 ORDER BY rowno NULLS LAST


"sys_connect_by_path(order_id, '-') rowno" 这个函数主要作用是可以把一个父节点下的所有子节点通过某个字符进行区分,然后按父子关系顺序显示. 那你就可以按这个排序了.
"start with id=1" 指定id为1的数据为根节点,遍历id为1的下面所有的子节点.


2.下面再看看页面部分,由于使用dtree插件,先引入js与css,同样见附件dtree.rar,页面中引入dtree.js与dtree.css即可:
  
<div class="dtree" >
                    <script type="text/javascript">
					 tree = new dTree('tree','${app}');

				      <c:forEach items="${ConsoleMenuList}" var="menu">		
				        tree.add('${menu.id}','${menu.parentId}','${menu.name}',<c:choose><c:when test="${not empty menu.url}">'${app}${menu.url}'</c:when><c:otherwise>''</c:otherwise></c:choose>,'${menu.name}','mainfrm','','','true','','');
				      </c:forEach>
				     
					 document.write(tree);
					</script>
                  </div>



ConsoleMenuList是通过sql语句查询出来的menu对象,遍历他,可以动态产生我们所需要的树形菜单,当然上面的代码只是个提示,具体见附件"dtree用法.ppt".



各位看完,应该会用了吧,很详细了,不想太费力气做树形菜单的,建议看看这文章,相信对你会有帮助的!
  • 大小: 42.6 KB
分享到:
评论

相关推荐

    javascript树形菜单Dtree插件

    Dtree是一款JavaScript插件,专为创建这样的树形目录而设计,它结合了实用性与美观性,使得在网页中实现交互式的树状菜单变得简单易行。 **Dtree的基本原理:** Dtree插件基于HTML、CSS和JavaScript构建,通过...

    dtree树状结构插件

    **dtree树状结构插件** 是一种用于在网页中展示层次化数据的工具,它以树形结构呈现信息,使用户能够清晰地理解和导航复杂的层级关系。在网页设计和开发中,dtree插件因其易用性和免费特性而受到欢迎。 **dtree的...

    Dtree树形结构菜单

    本篇文章将详细介绍Dtree的原理、使用方法以及如何结合Java和JavaScript实现树形结构菜单。 1. **Dtree的基本概念** Dtree的核心在于通过节点(Node)的概念构建层次结构。每个节点可以有子节点,形成分支;根节点...

    树形菜单dtree

    在IT领域,树形菜单(dtree)是一种常见的用户界面元素,它以树状结构来组织数据,便于用户浏览和操作。这种结构模仿了自然界中的树,其中根节点位于顶部,子节点则按照层次关系向下扩展。在本篇文章中,我们将深入...

    jsp树形菜单 dtree tree 树形菜单

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

    layui dtree树形结构

    layui dtree是一款基于layui框架的树形插件,它提供了丰富的功能和良好的用户体验,尤其适用于在Web应用中展示层级关系的数据。在这个场景中,我们看到的"layui dtree树形结构"指的是在用户点击一个文本框时,会弹出...

    jquery整合dtree 动态加载树形结构,提高效率

    本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构实例上传。测试数据库为...

    JAVA 结合 dtree 数据库取值树状显示

    为了将这些数据以树状结构显示,Java开发者可能会使用前端库,如dtree,它可能是基于JavaScript的一个库,专门用于构建树形组件。这个库可能提供了API接口,允许Java后端传递数据,然后在前端渲染成交互式的树状视图...

    基于js的无限树形菜单(dtree)

    dtree插件通过JavaScript实现了无限级别的树状结构,允许用户轻松地展开和折叠菜单项,同时支持动态加载子节点,提高页面性能。 二、dtree的核心特性 1. **无限层级**:dtree能够处理任意数量的层级,这使得它适合...

    jsp实现树形结构dtree

    dtree是一个JavaScript库,专门用于在网页中创建和显示树形结构。它提供了丰富的API,可以方便地配置和操作树节点,如添加、删除、修改节点,以及设置节点的展开和折叠状态。在JSP应用中,dtree可能通过Ajax技术与...

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

    dtree是一款基于jQuery的插件,它提供了丰富的API和灵活的配置选项,使得在网页上创建交互式树形菜单变得简单易行。 首先,我们来深入理解dtree的核心功能。dtree允许开发者通过JSON或者HTML结构来定义树形菜单的...

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

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

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

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

    dtree实现树形结构

    总之,"dtree实现树形结构"是指利用dtree这个JavaScript库来创建、操作和显示具有层级关系的数据结构。这个过程涉及到了数据模型的构建、API的使用以及与前端框架的集成,对于开发复杂的交互式用户界面至关重要。...

    js树形结构dtree,很好用,有实例

    通过查看和学习这些资源,开发者可以更好地理解如何使用`dtree`来构建树形结构,并将其应用于自己的项目中。在实际开发中,可以结合HTML、CSS和JavaScript,利用`dtree`的功能来创建交互式、视觉吸引人的树形界面,...

    js树形菜单-dtree

    `dtree`是一个专门用于创建JavaScript树形菜单的库,它的特点是易于定制和调用,使得开发者可以快速地实现自定义的树状导航结构。 首先,`dtree`的核心功能是构建可交互的树形结构。通过这个库,你可以轻松地将JSON...

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

    首先,jQuery dTree是一个轻量级的插件,它基于流行的jQuery库,使得在网页上创建可折叠的树状结构变得简单。它的主要优点是易于使用、灵活性高,以及与各种浏览器的兼容性良好。在无限树形菜单的场景中,dTree能够...

    树形菜单DTree使用小记

    在IT领域,尤其是在Web开发中,树形菜单(如DTree)是一种常见且实用的数据展示方式,它能够清晰地组织和展示层次结构的信息。本文将深入探讨“树形菜单DTree”的使用,以及如何通过源码和工具进行操作。由于没有...

Global site tag (gtag.js) - Google Analytics