Oracle Apex 19.1中添加层级Oracle JET甘特图的实现疑问

我之前在Apex 19.2版本里遇到过几乎一模一样的层级甘特图渲染问题，给你分享下实际可行的解决思路和步骤，完全不需要引入第三方方案，Apex内置的Oracle JET是支持层级甘特图的，问题大概率出在数据格式或者组件配置上。

核心问题分析 #

Cookbook里的“Hierarchical Tasks”示例用subTasks作为子节点的键，但Oracle JET的ArrayTreeDataProvider默认识别的子节点键是children。你现在只渲染出父元素，要么是数据里的子节点键没对应上，要么是没有明确告诉JET要使用自定义的子节点键。

具体解决步骤 #

1. 调整数据库JSON输出格式（推荐） #

直接在数据库查询里把节点的子元素键设为children，这样不需要额外配置JET组件。下面是一个示例查询，用json_object和json_arrayagg生成符合默认要求的层级JSON：

SELECT json_object(
  'id'          VALUE t.task_id,
  'title'       VALUE t.task_name,
  'start'       VALUE t.start_date,
  'end'         VALUE t.end_date,
  'progress'    VALUE t.progress, -- 如果需要显示进度
  'children'    VALUE COALESCE(
    (SELECT json_arrayagg(
       json_object(
         'id'          VALUE st.sub_task_id,
         'title'       VALUE st.sub_task_name,
         'start'       VALUE st.start_date,
         'end'         VALUE st.end_date,
         'progress'    VALUE st.progress
       )
     ) FROM sub_tasks st WHERE st.parent_task_id = t.task_id),
    json_array() -- 没有子节点时返回空数组，避免null导致JET识别失败
  )
) AS task_json
FROM tasks t
WHERE t.parent_task_id IS NULL; -- 只取顶层父节点

注意：一定要用COALESCE把空的子节点结果替换成json_array()，如果返回null，JET会认为该节点没有子元素能力，不会渲染展开按钮。

2. 配置JET组件使用自定义子节点键 #

如果你想保留subTasks作为子节点键，那么需要在初始化JET甘特图的ArrayTreeDataProvider时，明确指定childAttribute参数。在Apex里可以这么操作：

• 找到你的甘特图组件，进入Advanced标签页
• 在JavaScript Initialization Code里添加如下配置：

function(options) {
  // 假设你的数据源是页面项P1_TASK_DATA，或者直接从Apex的模型获取
  var taskData = apex.item('P1_TASK_DATA').getValue();
  var treeDataProvider = new oj.ArrayTreeDataProvider(taskData, {
    keyAttributes: 'id', // 任务的唯一标识键
    childAttribute: 'subTasks' // 指定子节点的键名
  });
  options.dataProvider = treeDataProvider;
  return options;
}

3. 调试验证 #

• 先验证JSON结构是否正确：在页面上添加一个Display Text组件，把查询返回的JSON内容输出，检查每个父节点的children（或subTasks）是否是有效的数组，子节点的字段（id、title、start、end等）是否完整。
• 用浏览器开发者工具查看控制台：有没有JET相关的报错，比如数据格式不匹配、字段缺失等问题。

如果按照上面的步骤操作后还是有问题，可以把你的JSON数据结构和Apex组件的配置代码贴出来，我可以帮你进一步排查。

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