Apex集成Fancytree无法加载数据库REST API动态数据求助

1. JSON格式不符合Fancytree要求 #

Fancytree渲染树形结构需要特定的JSON格式：每个节点必须包含key（唯一标识）、title（显示文本）；父节点需要标记isLazy: true（启用懒加载）或包含children数组（直接返回子节点）。

你的SQL查询返回的是平级数据，没有构建树形层级关系，也未标记父节点，Fancytree无法自动识别树形结构，因此无法渲染。

解决方法 #

修改REST API返回的JSON结构，构建符合要求的树形数据：

• 方法一：用Oracle递归SQL生成嵌套JSON（12c+支持）

  with recursive_tree as (
      select 
          id as key,
          code || '-' || name as title,
          parent_id,
          0 as level
      from vE5ProcessTreeLight
      where id = 15095794414151206135
      union all
      select 
          t.id as key,
          t.code || '-' || t.name as title,
          t.parent_id,
          rt.level + 1 as level
      from vE5ProcessTreeLight t
      join recursive_tree rt on t.parent_id = rt.key
  )
  select json_object(
      'key' value key,
      'title' value title,
      'isLazy' value case when exists (select 1 from vE5ProcessTreeLight where parent_id = rt.key) then 'true' else 'false' end,
      'children' value case when exists (select 1 from vE5ProcessTreeLight where parent_id = rt.key) then json_array() else null end
  ) as node
  from recursive_tree rt
  start with parent_id is null or parent_id = 15095794414151206135
  connect by prior key = parent_id
  order siblings by eqptype, name;
  

  若不需要懒加载，可去掉isLazy，直接递归生成完整的children数组。

• 方法二：在REST API的PL/SQL逻辑中，将平级数据组装为嵌套树形结构。

2. 跨域请求限制 #

如果Oracle Apex运行端口（如默认8080）与REST API端口（5080）不同，浏览器会触发跨域限制，导致Fancytree无法获取数据。

解决方法 #

• 将REST API部署到与Apex相同的域名/端口下（比如使用同实例的ORDS部署）
• 在ORDS中配置CORS规则：
  在ords_params.properties中添加：

  security.cors.enabled=true
  security.cors.allow-origins=http://localhost:8080  # 替换为你的Apex访问地址
  security.cors.allow-methods=GET,POST
  security.cors.allow-headers=Content-Type
  

3. JavaScript配置逻辑冲突 #

你的代码同时设置了source和lazyLoad，但两者逻辑不匹配：

• source用于加载初始根节点，lazyLoad用于展开节点时加载子节点，但你直接复用了同一个返回全量平级数据的API，导致子节点加载逻辑失效。

解决方法 #

根据需求调整配置：

• 一次性加载全量树形结构（非懒加载）：删除lazyLoad，确保API返回完整嵌套JSON数组

  $("#tree1").fancytree({
    checkbox: true,
    selectMode: 3,
    source: {
      url: "http://localhost:5080/ords/test/fancyTree/api",
      dataType: "json"  // 显式指定数据类型，避免解析错误
    }
  });
  

• 启用懒加载：修改API支持按父节点ID查询子节点，调整JS逻辑

  $("#tree1").fancytree({
    checkbox: true,
    selectMode: 3,
    source: {
      url: "http://localhost:5080/ords/test/fancyTree/api",
      data: { parentId: "15095794414151206135" }  // 初始加载根节点
    },
    lazyLoad: function(event, data) {
      // 传递当前节点key作为父ID查询子节点
      data.result = {
        url: "http://localhost:5080/ords/test/fancyTree/api",
        data: { parentId: data.node.key }
      };
    }
  });
  

  同时修改SQL，接收parentId参数返回对应子节点：

  select 
      id as key,
      code || '-' || name as title,
      case when exists (select 1 from vE5ProcessTreeLight where parent_id = t.id) then 'true' else 'false' end as isLazy
  from vE5ProcessTreeLight t
  where parent_id = :parentId  -- 绑定API传入的parentId参数
  order by eqptype, name;
  

4. API返回格式错误 #

若REST API返回的Content-Type不是application/json，Fancytree无法正确解析数据。

解决方法 #

检查ORDS的REST模块配置，确保响应的Content-Type设置为application/json。

5. 调试建议 #

• 打开浏览器开发者工具（F12），在Network标签查看API请求状态：
  • 404：确认API地址是否正确
  • 500：查看API报错信息，排查SQL或ORDS配置问题
  • 200：检查返回的JSON内容是否符合格式要求
• 在Console标签查看JavaScript报错信息，排查Fancytree初始化问题

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