Question

我正在使用Oracle Application Express 18.2.0.00.12，并且对使用列表为部门创建组织结构图有疑问。

在我的部门中，只有一名部门经理，三名部门经理和30名团队成员。每个部门经理管理10名团队成员。需要对组织结构图进行格式化，以使唯一的部门经理在顶部，三个部门经理在中间，而30个团队成员在底部。

问题：我的要求是将团队成员级别的员工人数限制为9名员工（每个部门经理3名）。但是，如果添加了第四个部门经理，我希望将此经理与其他部门经理一起添加到第二级，然后在第二级以下的每一行中有12个团队成员（四个部分中的每个都有3个团队成员）经理）。无论第2级的部门经理有多少，我总是希望每个3、4、5等级别的部门经理都需要三名团队成员。

我使用@mathguy中的以下代码创建了一个表：

create table employee_table(employee_number, name, manager, department) as
select 1001, 'Big Boss', null, 100 from dual union all
select 1100, 'Beth Mgr', 1001, 100 from dual union all
select 1101, 'Jim'     , 1100, 100 from dual union all
select 1102, 'Jackie'  , 1100, 100 from dual union all
select 1103, 'Helen'   , 1100, 100 from dual union all
select 1104, 'Tom'     , 1100, 100 from dual union all
select 1105, 'Vance'   , 1100, 100 from dual union all
select 1106, 'Rosa'    , 1100, 100 from dual union all
select 1107, 'Chuck'   , 1100, 100 from dual union all
select 1200, 'Duck Mgr', 1001, 200 from dual union all
select 1201, 'Danny'   , 1200, 200 from dual union all
select 1202, 'Henry'   , 1200, 200 from dual union all
select 1203, 'Mac'     , 1200, 200 from dual union all
select 1204, 'Hassan'  , 1200, 200 from dual union all
select 1205, 'Ann'     , 1200, 200 from dual union all
select 1300, 'Adam Mgr', 1001, 300 from dual union all
select 1301, 'Wendy'   , 1300, 300 from dual;

我已经使用@mathguy的以下查询在APEX中创建了一个列表：

select   case lvl when 3 then lvl + ceil(rn/3) - 1 else lvl end as lvl,
     employee_number, name, manager, department
from     (
      select     level as lvl, employee_number, name, manager, department,
                 rownum as ord, 
                 row_number() over 
                    (partition by manager order by employee_number) as rn
      from       employee_table2
      start with manager is null
      connect by prior employee_number = manager
     )
order by ord;

然后，我使用Christian Rokitta的说明来说明如何在APEX（http://rokitta.blogspot.com/2013/12/pure-css3-org-tree-with-apex-list.html）中使用列表和CSS创建基本的组织图。

对于列表模板：

模板类：分层扩展

Before List Entry:
<div class="tree">
<ul>
Template Definition
List Template Current	
<li><a href="#LINK#">#TEXT#</a></li>
List Template Noncurrent	
<li><a href="#LINK#">#TEXT#</a></li>
Before Sublist Entry
<ul>
Sublist Entry
Sublist Template Current	
<li><a href="#LINK#">#TEXT#</a></li>
Sublist Template Noncurrent	
<li><a href="#LINK#">#TEXT#</a></li>
After Sublist Entry
</ul>
After List Entry
</ul>
</div>

在页面属性的“内联CSS”部分中：

.tree {
  overflow-x: auto;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
}
.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,.tree li a:hover+ul li::before,.tree li a:hover+ul::before {
  border-color: #94a0b4;
}

上面的代码在APEX中产生以下组织结构图：

这与我尝试制作的视觉效果非常接近。 “每级9个团队成员”背后的原因是试图防止图表在水平方向上过大。但是，如果您向左看，例如，雇员1104、1105和1106在1103下，雇员1107在1106下。最好是雇员1104在1101下，雇员1105在1102下，雇员1106在1103下，和1104下面的员工1107。是否有任何方法可以编辑代码以使其直观地产生此结果？

谢谢。

Oracle APEX-使用列表创建组织图

0 个答案: