Oracle APEX中PL/SQL动态内容生成组织图仅显示单个节点求助

你的代码仅显示单个节点，核心问题及修复方案如下：

1. 重复生成DOM容器与图表实例 #

原代码在PL/SQL循环内重复输出<div id="tree"/>、加载OrgChart.js并创建新图表实例，导致：

• 浏览器仅识别最后一个同ID的DOM容器
• 每次循环都会覆盖之前的图表实例，最终只保留最后一次循环生成的节点

修复：
将DOM容器、脚本引入、模板定义、图表实例创建逻辑全部移到循环外部，仅执行一次。

2. Nodes数组未汇总所有节点 #

原代码每次循环仅向nodes数组添加当前节点，没有将所有节点数据合并到同一个数组中，导致每个图表实例仅包含单个节点。

修复：
先通过PL/SQL循环拼接所有节点的JSON字符串，再一次性传入nodes数组。

3. 未配置父节点关系 #

查询中获取了parent_id但未加入节点配置，OrgChart无法识别层级关系，即使有多个节点也无法展示树形结构。

修复：
在节点对象中添加pid属性（对应OrgChart的父节点ID字段）。

完整修复后的PL/SQL代码 #

declare
    l_nodes clob;
    cursor c1 is 
        select m.srno, t.empname, t.desig, m.parent_id, t.phone, t.email
        from table1 m 
        join table2 t on t.pk = m.fk
        join table3 p on p.cond = m.cond;
Begin
    -- 初始化节点JSON字符串
    l_nodes := '';
    
    -- 循环拼接所有节点的JSON
    for i in c1 loop 
        if l_nodes is not null then
            l_nodes := l_nodes || ',';
        end if;
        -- 替换字段中的双引号，避免JSON语法错误
        l_nodes := l_nodes || '{ id: "' || i.srno || '", '
                          || 'Name: "' || replace(i.empname, '"', '\"') || '", '
                          || 'Designation: "' || replace(i.desig, '"', '\"') || '", '
                          || 'phone: "' || replace(i.phone, '"', '\"') || '", '
                          || 'email: "' || replace(i.email, '"', '\"') || '", '
                          || 'pid: "' || i.parent_id || '" }';
    End Loop;

    -- 输出DOM容器（仅一次）
    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: [' || l_nodes || ']
});
</script>');
end;

额外说明 #

• 加入replace函数处理字段中的双引号，避免JSON语法错误
• 确保parent_id值与父节点的srno匹配，根节点的parent_id可设为空或0，OrgChart会自动识别根节点

内容的提问来源于stack exchange，提问作者Ali