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

关于根据[节点]、[父节点]和[节点级别]生成html标记的树型脚本

阅读更多
0.建表语句无私奉上
-- Create table
create table M_ORG
(
  ORG_ID          VARCHAR2(32) not null,
  SHORT_NAME      VARCHAR2(50),
  NAME            VARCHAR2(100) not null,
  FULL_ID         VARCHAR2(320),
  FULL_NAME       VARCHAR2(500) not null,
  ENAME           VARCHAR2(200),
  ORG_CLASS       CHAR(1) not null,
  BRANCH_LEVEL    INTEGER,
  NODE_URL        VARCHAR2(100) default '#',
  IS_LAST_NODE    CHAR(1),
  PARENT_ORG_ID   VARCHAR2(32),
  BRANCH_INDEX    INTEGER,
  LOGO            VARCHAR2(100),
  DESC_INFO       VARCHAR2(1000),
  COM_ENABLE      CHAR(1) default 1,
  COM_DEL_FLG     CHAR(1) default 0,
  COM_ADD_DATE    DATE,
  COM_UPD_DATE    DATE,
  COM_DEL_DATE    DATE,
  COM_ADD_USER_ID VARCHAR2(32),
  COM_UPD_USER_ID VARCHAR2(32),
  COM_DEL_USER_ID VARCHAR2(32)
)
tablespace CAH_SMS_TBS
  pctfree 10
  initrans 1
  maxtrans 255
  storage
  (
    initial 64K
    next 1M
    minextents 1
    maxextents unlimited
  );
-- Add comments to the table 
comment on table M_ORG
  is '组织机构表。

用于管理组织机构图 organization chart(组织机构树形图)。
存储组织机构树所有节点信息。

组织机构ID规则说明:
  1.一级组织由001开始;二级组织由001001开始;依次类推。
  2.由于组织机构ID长度限制,最多支持到10级机构。';
-- Add comments to the columns 
comment on column M_ORG.ORG_ID
  is '组织机构ID(根据类别不同标示为不同单位部门职务的ID)';
comment on column M_ORG.SHORT_NAME
  is '短称';
comment on column M_ORG.NAME
  is '组织机构中文名称(机构树节点显示用)';
comment on column M_ORG.FULL_ID
  is '全ID(#号链接)';
comment on column M_ORG.FULL_NAME
  is '组织机构中文全称';
comment on column M_ORG.ENAME
  is '组织机构英文名称';
comment on column M_ORG.ORG_CLASS
  is '类别(1:单位;2:部门;3:职务)【数据字典:ORG_CLASS】';
comment on column M_ORG.BRANCH_LEVEL
  is '级别';
comment on column M_ORG.NODE_URL
  is '资源位置';
comment on column M_ORG.IS_LAST_NODE
  is '是否末级(Y/N)【数据字典:YES_NO】';
comment on column M_ORG.PARENT_ORG_ID
  is '上级组织机构ID';
comment on column M_ORG.BRANCH_INDEX
  is '枝顺序';
comment on column M_ORG.LOGO
  is '图标名称';
comment on column M_ORG.DESC_INFO
  is '描述';
comment on column M_ORG.COM_ENABLE
  is '是否可用(1:可用;0:不可用)';
comment on column M_ORG.COM_DEL_FLG
  is '是否删除(1:已删除;0:未删除)';
comment on column M_ORG.COM_ADD_DATE
  is '创建日期(yyyy-MM-dd hh:mm:ss)';
comment on column M_ORG.COM_UPD_DATE
  is '更新日期(yyyy-MM-dd hh:mm:ss)';
comment on column M_ORG.COM_DEL_DATE
  is '删除日期(yyyy-MM-dd hh:mm:ss)';
comment on column M_ORG.COM_ADD_USER_ID
  is '创建者用户ID';
comment on column M_ORG.COM_UPD_USER_ID
  is '更新者用户ID';
comment on column M_ORG.COM_DEL_USER_ID
  is '删除者用户ID';
-- Create/Recreate primary, unique and foreign key constraints 
alter table M_ORG
  add constraint XPK组织机构表 primary key (ORG_ID)
  using index 
  tablespace CAH_SMS_TBS
  pctfree 10
  initrans 2
  maxtrans 255
  storage
  (
    initial 64K
    next 1M
    minextents 1
    maxextents unlimited
  );

1.初步格式化组织机构树形结构
CREATE OR REPLACE VIEW V_ORG_TREE_SUB AS
SELECT REPLACE(LPAD('|-', (LEVEL - 1) * 2), '|-', '<LI>') || NAME AS NAME,
               ORG_ID,
               PARENT_ORG_ID,
               BRANCH_LEVEL,
               SHORT_NAME,
               FULL_ID,
               FULL_NAME,
               ENAME,
               ORG_CLASS,
               NODE_URL,
               IS_LAST_NODE,
               BRANCH_INDEX,
               LOGO,
               DESC_INFO
          FROM CAHSMS_M_ORG -- 组织机构:单位>部门>职务
        CONNECT BY PRIOR ORG_ID = PARENT_ORG_ID
         START WITH ORG_ID = '001';

2.加工完毕树形结构代码
CREATE OR REPLACE VIEW V_ORG_TREE AS
SELECT CASE
         WHEN ORG.ORG_ID = RN_NEXT.PARENT_ORG_ID THEN
          ORG.NAME || '<ul>' -- 该节点是父节点
         WHEN ORG.BRANCH_LEVEL - 1 > RN_NEXT.BRANCH_LEVEL OR
              RN_NEXT.BRANCH_LEVEL IS NULL THEN
          ORG.NAME || '</li> </ul></li>' ||
          DECODE(ORG.BRANCH_LEVEL - 1 -
                 DECODE(RN_NEXT.BRANCH_LEVEL, NULL, 2, RN_NEXT.BRANCH_LEVEL),
                 1,
                 '    </ul></li>',
                 2,
                 '    </ul></li></ul></li>',
                 3,
                 '    </ul></li></ul></li></ul></li>',
                 4,
                 '    </ul></li></ul></li></ul></li></ul></li>',
                 5,
                 '    </ul></li></ul></li></ul></li></ul></li></ul></li>',
                 6,
                 '    </ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>',
                 7,
                 '    </ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>',
                 8,
                 '    </ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>',
                 9,
                 '    </ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>'
                 , '') -- 与下个节点不在一棵树枝上
         WHEN ORG.PARENT_ORG_ID = RN_NEXT.PARENT_ORG_ID THEN
          ORG.NAME || '</li>' -- 【所在枝有两个以上节点】非末节点
         WHEN ORG.PARENT_ORG_ID = RN_PREV.PARENT_ORG_ID AND
              ORG.PARENT_ORG_ID != RN_NEXT.PARENT_ORG_ID THEN
          ORG.NAME || '</li> </ul></li>' -- 【所在枝有两个以上节点】末节点
         ELSE
          ORG.NAME || '</li> </ul></li>'
       END AS NAME,
       ORG.ORG_ID,
       ORG.PARENT_ORG_ID,
       RN_PREV.PARENT_ORG_ID AS PARENT_ORG_ID_PREV, -- 上个节点的父节点ID
       RN_NEXT.PARENT_ORG_ID AS PARENT_ORG_ID_NEXT, -- 下个节点的父节点ID
       ORG.BRANCH_LEVEL AS BRANCH_LEVEL,
       RN_PREV.BRANCH_LEVEL AS BRANCH_LEVEL_PREV, -- 上个节点所在枝级别
       RN_NEXT.BRANCH_LEVEL AS BRANCH_LEVEL_NEXT, -- 下个节点所在枝级别
       ORG.SHORT_NAME,
       ORG.FULL_ID,
       ORG.FULL_NAME,
       ORG.ENAME,
       ORG.ORG_CLASS,
       ORG.NODE_URL,
       ORG.IS_LAST_NODE,
       ORG.BRANCH_INDEX,
       ORG.LOGO,
       ORG.DESC_INFO
  FROM (SELECT SUB.*, ROWNUM AS RN FROM V_ORG_TREE_SUB SUB) ORG
  LEFT JOIN (SELECT SUB.*, ROWNUM + 1 AS RN_PREV FROM V_ORG_TREE_SUB SUB) RN_PREV ON ORG.RN =
                                                                                     RN_PREV.RN_PREV
  LEFT JOIN (SELECT SUB.*, ROWNUM - 1 AS RN_NEXT FROM V_ORG_TREE_SUB SUB) RN_NEXT ON ORG.RN =
                                                                                     RN_NEXT.RN_NEXT;



3.视图数据挂接到jsp中
		<ul id="org" style="display: none">
			<li>
				<!-- 以下内容由SQL脚本直接查询 start-->
				<c:forEach items="${orgTrees}" var="org">
					${org}
				</c:forEach>
				<!-- 以上内容由SQL脚本直接查询 end-->
			
				<!-- 匹配根节点的结束 -->
				</ul>

			</li>
		</ul>


------------------------------感情丰富的感谢线-----------------------------
Trees in Oracle SQL http://philip.greenspun.com/sql/trees.html
jQuery Org Chart demo (注意:jOrgChart效果IE8+支持)http://www.capricasoftware.co.uk/jquery/orgchart/orgchart.html
jQuery Org Chart Code https://github.com/Tquila/jOrgChart

-------------后续报告--------------
jQuery Org Chart 已然修改了IE7的UBG http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/
下载移步这里:https://github.com/wesnolte/jOrgChart/downloads
分享到:
评论

相关推荐

    树型结构自动生成HTML系统

    在IT行业中,构建一个树型结构自动生成HTML系统的任务是一项常见的需求,特别是在网站内容管理和新闻发布的场景下。本文将深入探讨如何使用PHP和HTML技术来实现这样的系统,并结合"mycodes.net"这个文件名,我们可以...

    XML 树型控件代码.rar_html_html 树_html 树型_树型控件

    XML(Extensible Markup Language)是一种标记语言,常用于数据交换和结构化数据表示。在这个实例中,我们将讨论如何使用XML来创建一个HTML页面上的树型控件。树型控件通常用于显示层次结构的数据,例如文件系统、...

    生成html的树型PHP论坛程序

    当用户访问论坛时,PHP脚本会根据数据生成静态HTML页面,这些页面存储在服务器上,之后的访问就直接读取这些预生成的页面,而不是每次都执行数据库查询。这种方法可以显著提高页面加载速度,减少数据库负载,尤其是...

    ajax动态生成树型菜单

    这可能包括父节点ID、节点ID、节点名称等字段。 4. **编写DAO层**:实现数据访问对象(DAO)来与数据库进行交互,查询和获取菜单数据。 5. **Ajax请求**:在前端,使用JavaScript或jQuery发送Ajax请求到Struts2 ...

    [新闻文章]树型结构自动生成HTML系统_phptree.zip

    4. **自动生成**:在Web开发中,自动生成HTML意味着系统能够根据预设规则或用户输入的数据,自动创建和更新HTML页面,减少了手动编写代码的工作量。 5. **系统实现**:`phptree`可能是一个PHP类库或脚本,用于接收...

    HTML网页中树型结构的纯脚本实现

    一个简单的树型结构可以由`&lt;ul&gt;`和`&lt;li&gt;`元素构建,其中`&lt;ul&gt;`表示父节点,而`&lt;li&gt;`表示子节点。例如: ```html 父节点1 子节点1.1 子节点1.2 父节点2 子节点2.1 ``` 为了实现树型结构的展开与...

    dtreebox脚本树型复选框

    总之,`dtreebox` 脚本为网页开发提供了一个高效、灵活的树型复选框解决方案,适用于需要展示和管理层次化数据的场景。通过熟练掌握其使用方法和API,开发者可以轻松构建出用户界面友好、功能强大的网页应用。

    HTML+JS 树型结构

    在构建树型结构时,我们通常会使用`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)标签来创建基本的节点层次。例如,顶层节点可能是一个`&lt;ul&gt;`,每个子节点是`&lt;li&gt;`,而子节点下还可以嵌套`&lt;ul&gt;`来表示更深层次的结构。 ...

    树型目录,权限设置通用JS实例

    在IT领域,尤其是在Web开发中,构建树型目录结构是一种常见的需求,这通常涉及到数据组织和用户界面的呈现。树型目录允许用户以层级方式查看和管理数据,比如文件系统、菜单导航或权限控制。本实例关注的是如何利用...

    js+html+xml树型结构非常棒

    在树型结构中,JavaScript可以用来解析XML数据,根据数据生成DOM元素,并实现节点的展开、折叠、添加、删除等操作。例如,使用jQuery库,我们可以轻松地遍历XML,动态创建HTML元素: ```javascript $(document)....

    html.rar_html_html date_html 二级菜单_树html_树型菜单

    在IT领域,HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它与CSS(Cascading Style Sheets)和JavaScript一起构成了Web开发的基础。在这个名为"html.rar"的压缩包中,我们可以找到一些关于HTML...

    oracle 树型的寻父或寻子

    本篇主要探讨如何在Oracle中进行树型结构的寻父或寻子操作,这涉及到一系列的查询技巧和数据库设计策略。 首先,我们通常使用递归查询来处理树型结构。Oracle提供了CONNECT BY子句,它允许我们在一个查询中多次引用...

    简单js树型结构好用

    在网页开发中,树型结构是一种常见的数据展示方式,它能有效地组织和展现层次化的信息。JavaScript(简称js)作为一种广泛使用的客户端脚本语言,常用于实现动态交互效果,包括构建树形结构。本篇文章将深入探讨如何...

    Javascript树型菜单

    对于JavaScript树型菜单,可能有相关的脚本管理和MIME类型设置。 7. **第三方库**:虽然在提供的文件列表中没有明确的JavaScript库,但实现树型菜单通常会用到像jQuery UI、jstree或Bootstrap Treeview这样的库。...

    坏孩子无限级树型菜单_aspx开发教程.rar

    每个节点的展开和折叠可以通过事件处理程序控制,根据需要异步加载子节点,以优化性能。 此外,CSS和JavaScript也扮演着重要角色。为了美化菜单并提供交互性,可以编写CSS样式来定义节点的外观,例如颜色、字体、...

    精美的ajax树型菜单

    - `TreeView_Kernel.js` 和 `TreeView_Support.js`:这两个JavaScript文件很可能是实现树型菜单功能的核心脚本。JavaScript是Web开发中的主要脚本语言,负责处理用户的交互,实现动态效果和功能。 - `utils.js`:这...

    活字格-菜单和树型图.zip

    "活字格-菜单和树型图.zip"这个压缩包文件包含了用于构建和自定义菜单以及树型图的资源和组件。活字格,可能是一个低代码开发平台,旨在简化应用开发过程,允许用户通过图形化界面创建和设计功能丰富的应用程序。在...

    无限级可刷新Js树型菜单

    "name": "父节点1", "children": [ { "id": 2, "name": "子节点1", "children": [...] }, ... ] } ``` 2. 渲染菜单:JavaScript通过遍历数据结构,生成HTML元素并插入到DOM(文档对象模型)中,以呈现菜单...

    多级目录树型结构菜单js代码

    每个节点都有一个父节点(除了根节点)和零个或多个子节点。在树型结构菜单中,每个节点代表一个菜单项,可以包含子菜单,形成一个多级的层次结构。 1. **JavaScript基础**:此项目中的核心代码是用JavaScript编写...

    坏孩子无限级树型菜单asp.net+SQL

    在构建树型菜单时,通常会用到关系数据库来存储节点信息,包括节点ID、父节点ID、节点名称等。利用SQL查询,我们可以轻松地获取和组织这些数据,形成层次结构。 无限级树型菜单的核心在于递归算法,通过递归遍历...

Global site tag (gtag.js) - Google Analytics