使用 pl sql 动态内容在 oracle 顶点制作组织结构图

Question

大家好，希望你们都好。 我正在研究 oracle apex，我想制作一个组织结构图。在探索 inte.net 之后，我在这里得到了基于 JavaScript 的 orgchart 源代码，但我想进行基于图表查询并获得成功的代码

declare
cursor c1 is 
select m.srno,t.empname,t.desig,m.parent_id,t.phone,t.email

 from table1 m ,table2 t,table3 p 
     where t.pk=m.fk
     and p.cond=m.cond;
Begin
for i in c1 loop 

htp.p('<div id="tree"/>');
Htp.p('
<script src="https://balkan.app/js/OrgChart.js"></script>
<script>
OrgChart.templates.ana.field_0 = ''<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_1 = ''<text class="field_1"  style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_2 = ''<text class="field_2"  style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_3 = ''<text class="field_3"  style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>'';
var chart = new OrgChart(document.getElementById("tree"), {
    mouseScrool: OrgChart.action.none,
    template: "ana",
    enableSearch: false,
    nodeBinding: {
        field_0: "Name",
        field_1: "Designation",
        field_2: "phone",
        field_3: "email"
    },
  
    nodes: [
    
        { id: "'||i.srno||'", Name: "'||i.empname||'", Designation: "'||i.desig||'", phone: "'||i.phone||'", email: "'||i.mail||'" }
    ]
});
</script>');
End Loop;
end;

但问题是它只显示节点。 问题在哪里？？

Answer 1

还没有测试过，但这似乎是错误的。 循环在 div 之外——这意味着您期望每个节点有一个 div。 在它显示的示例代码中

    nodes: [
        { id: "1", name: "Amber McKenzie", title: "CEO", phone: "878 108 255", email: "amber.mcKenzie@gmail.com" },
        { id: "2", pid: "1", name: "Ava Field", title: "IT Manager", phone: "554 484 126", email: "ava.field@live.com" },
        { id: "3", pid: "1", name: "Peter Stevens", title: "HR Manager", phone: "897 112 444" }
    ]

所以它期待一个节点数组。 我认为你需要这样的东西（未经测试，但你会明白的）

declare
cursor c1 is 
select m.srno,t.empname,t.desig,m.parent_id,t.phone,t.email

 from table1 m ,table2 t,table3 p 
     where t.pk=m.fk
     and p.cond=m.cond;
Begin
htp.p('<div id="tree"/>');
Htp.p('
<script src="https://balkan.app/js/OrgChart.js"></script>
<script>
OrgChart.templates.ana.field_0 = ''<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_1 = ''<text class="field_1"  style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_2 = ''<text class="field_2"  style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_3 = ''<text class="field_3"  style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>'';
var chart = new OrgChart(document.getElementById("tree"), {
    mouseScrool: OrgChart.action.none,
    template: "ana",
    enableSearch: false,
    nodeBinding: {
        field_0: "Name",
        field_1: "Designation",
        field_2: "phone",
        field_3: "email"
    },
  
    nodes: [
';


for i in c1 loop 
htp.p('{ id: "'||i.srno||'", Name: "'||i.empname||'", Designation: "'||i.desig||'", phone: "'||i.phone||'", email: "'||i.mail||'" }');
End Loop;
htp.p('
    ]
});
</script>');
end;