我之前也在Apex 5.1上折腾过JET甘特图的集成，确实因为5.0和5.1的JET版本差异踩了不少坑，给你整理一套亲测有效的步骤吧：

1. 先明确版本对应关系 #

Apex 5.1内置的是Oracle JET 2.3.0，和5.0用的版本差异很大，所以所有资源引用和API调用必须匹配这个版本，别乱用更高版本的JET文件，否则兼容性问题会直接让甘特图无法渲染。你可以在Apex的Shared Components > Static Application Files里找到自带的JET资源，路径都是以/i/libraries/oraclejet/2.3.0/开头的。

2. 给页面添加必要的静态资源 #

在要集成甘特图的页面，通过页面属性添加以下资源：

• CSS文件URL：/i/libraries/oraclejet/2.3.0/css/libs/oj/v2.3.0/oj-alta-min.css
• JavaScript文件URL（按顺序添加）：
  • /i/libraries/jquery/2.2.4/jquery-2.2.4.min.js（Apex 5.1自带的jQuery版本）
  • /i/libraries/oraclejet/2.3.0/js/libs/oj/v2.3.0/ojcore.js
  • /i/libraries/oraclejet/2.3.0/js/libs/oj/v2.3.0/ojmodel.js
  • /i/libraries/oraclejet/2.3.0/js/libs/oj/v2.3.0/ojgantt.js

3. 创建甘特图的HTML容器 #

在页面上添加一个HTML区域，里面放一个用于渲染甘特图的div，设置好ID和基础样式：

<div id="ganttContainer" style="width: 100%; height: 600px;"></div>

4. 编写初始化甘特图的JS代码 #

在页面的JavaScript > 执行当页面加载时（或者添加一个“页面加载”触发的动态动作），写入以下代码。注意JET 2.3.0的API和高版本不同，别照搬新资料里的参数：

// 先模拟一组测试数据，实际可以替换成从数据库获取的动态数据
const ganttTestData = [
  {
    "id": 1,
    "title": "项目立项",
    "start": new Date("2024-03-01"),
    "end": new Date("2024-03-07"),
    "progress": 100,
    "children": []
  },
  {
    "id": 2,
    "title": "UI设计",
    "start": new Date("2024-03-08"),
    "end": new Date("2024-03-22"),
    "progress": 60,
    "children": [
      {
        "id": 21,
        "title": "原型设计",
        "start": new Date("2024-03-08"),
        "end": new Date("2024-03-12"),
        "progress": 100
      },
      {
        "id": 22,
        "title": "视觉设计",
        "start": new Date("2024-03-13"),
        "end": new Date("2024-03-22"),
        "progress": 40
      }
    ]
  }
];

// 初始化甘特图
$(function() {
  $("#ganttContainer").ojGantt({
    data: ganttTestData,
    taskLayout: "tree", // JET 2.3.0支持tree或list两种布局
    startDate: new Date("2024-03-01"),
    endDate: new Date("2024-04-30"),
    selectionMode: "single",
    hoverBehavior: "dim"
  });
});

5. 对接Apex数据库动态数据（可选） #

如果需要从数据库拉取真实任务数据，可以按以下步骤操作：

1. 创建一个PL/SQL存储过程，返回符合JET甘特图格式的JSON：

CREATE OR REPLACE PROCEDURE get_gantt_task_data(p_result OUT CLOB) AS
BEGIN
  SELECT JSON_ARRAYAGG(
           JSON_OBJECT(
             'id' VALUE task_id,
             'title' VALUE task_name,
             'start' VALUE start_date,
             'end' VALUE end_date,
             'progress' VALUE progress_rate,
             'children' VALUE (SELECT JSON_ARRAYAGG(
                                       JSON_OBJECT(
                                         'id' VALUE child_task_id,
                                         'title' VALUE child_task_name,
                                         'start' VALUE child_start_date,
                                         'end' VALUE child_end_date,
                                         'progress' VALUE child_progress_rate
                                       )
                                     ) FROM child_tasks ct WHERE ct.parent_task_id = t.task_id)
           )
         ) INTO p_result
  FROM project_tasks t;
END;
/

2. 在Apex页面创建一个AJAX回调过程，调用上述存储过程并返回JSON数据。
3. 修改初始化JS代码，通过apex.server.process获取动态数据：

$(function() {
  apex.server.process('FETCH_GANTT_DATA', {}, {
    success: function(response) {
      $("#ganttContainer").ojGantt({
        data: JSON.parse(response),
        taskLayout: "tree",
        startDate: new Date("2024-03-01"),
        endDate: new Date("2024-04-30"),
        selectionMode: "single",
        hoverBehavior: "dim"
      });
    },
    error: function() {
      apex.message.showPageSuccess('加载甘特图数据失败，请稍后重试');
    }
  });
});

6. 常见问题排查 #

• 甘特图不显示：打开浏览器控制台看错误，优先检查资源路径是否写错（比如JET版本号）、是否有JS语法错误。
• 样式错乱：确认已经引用了正确的oj-alta-min.css，这是Apex 5.1对应的JET主题样式。
• 数据不渲染：检查返回的JSON格式是否符合JET 2.3.0的要求，比如日期格式是否能被JS解析、children字段是否为数组（没有子任务时返回空数组）。

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