jQuery Gantt 圖表 JSON 交互：後端 Java 生成規範 JSON 與前端渲染

JSON 格式要求

• 屬性名必須雙引號**：{"name": "Task 1"}，單引號或無引號會導致 $.ajax 解析失敗，進入 error 回調而非 success。
• 日期格式統一用 yyyy-MM-dd。

後端 Java 生成（Jackson）

@RestController
public class GanttController {
    @GetMapping("/gantt-data")
    public List data() {
        return List.of(
            new Task(1, "Design", "2024-01-01", "2024-01-10", 0, ""),
            new Task(2, "Develop", "2024-01-11", "2024-01-20", 1, "1")
        );
    }
}

@Data @AllArgsConstructor
class Task {
    private int id, parentId, progress;
    private String name, start, end, depends;
}

Spring Boot 自動用 Jackson 序列化為標準 JSON，屬性名雙引號、日期字符串均符合要求。

前端初始化

$.getJSON('/gantt-data', function(tasks) {
    $('.gantt').gantt({
        source: tasks,
        navigate: 'scroll',
        scale: 'day',
        maxScale: 'month',
        minScale: 'day',
        itemsPerPage: 20,
        onItemClick: function(data) { console.log(data); }
    });
});

常見坑

• 手動拼接 JSON 字符串極易出錯 → 務必用成熟庫（Jackson/Gson/Jsoniter）序列化 POJO**。
• 時區導致日期偏移 → 後端統一 UTC，前端按本地時區顯示。