如何通过Thymeleaf将Spring后端数据注入JS表格生成甘特图？

没问题，我来帮你搞定这个事儿——用Thymeleaf把Spring控制器传递的slots列表注入到JS的DataTable里，其实核心就是用Thymeleaf的JavaScript内联功能，下面是具体步骤和代码示例：

1. 先确认你的Slots实体字段匹配 #

首先得保证你的Slots类包含甘特图需要的所有字段，比如：

public class Slots {
    private String taskId;
    private String taskName;
    private String resource;
    private Date startDate;
    private Date endDate;
    private Integer percentComplete; // 可选，无值时默认100%
    private String dependencies; // 可选，无值时默认null

    // 别忘了加Getter和Setter方法
}

如果你的字段名和上面不一样，后续JS代码里要对应修改哦。

2. 在Thymeleaf模板里编写带内联的JS代码 #

在你的gantt.html模板中，给<script>标签加上th:inline="javascript"属性（告诉Thymeleaf要解析脚本里的表达式），然后通过/*[[${slots}]]*/获取后端传递的列表，再遍历生成甘特图需要的数据行：

<script th:inline="javascript">
    var data = new google.visualization.DataTable();
    // 先定义表格列，和你原来的代码一致
    data.addColumn('string', 'Task ID');
    data.addColumn('string', 'Task Name');
    data.addColumn('string', 'Resource');
    data.addColumn('date', 'Start Date');
    data.addColumn('date', 'End Date');
    data.addColumn('number', 'Duration');
    data.addColumn('number', 'Percent Complete');
    data.addColumn('string', 'Dependencies');

    // 从Thymeleaf获取后端的slots列表，[]是列表为空时的默认值
    var slots = /*[[${slots}]]*/ [];

    // 遍历slots生成甘特图数据行
    var ganttRows = [];
    slots.forEach(function(slot) {
        // 可选：计算时长（单位是天），不需要的话直接传null
        var duration = slot.endDate ? (new Date(slot.endDate) - new Date(slot.startDate)) / (1000 * 60 * 60 * 24) : null;
        
        ganttRows.push([
            slot.taskId,
            slot.taskName,
            slot.resource,
            new Date(slot.startDate), // Thymeleaf会把Java Date转成ISO字符串，JS能直接解析
            new Date(slot.endDate),
            duration,
            slot.percentComplete || 100, // 无值时默认100%完成
            slot.dependencies || null
        ]);
    });

    // 把生成的行添加到DataTable
    data.addRows(ganttRows);

    // 下面是你原来的甘特图渲染代码，继续保留即可
    var options = {
        height: 400,
        gantt: {
            trackHeight: 30
        }
    };

    var chart = new google.visualization.Gantt(document.getElementById('gantt_chart'));
    chart.draw(data, options);
</script>

3. 几个关键注意点 #

• 日期处理：如果后端用的是java.util.Date，Thymeleaf会自动把它转成ISO 8601格式的字符串（比如"2018-03-06T00:00:00"），JS的new Date()能直接解析。要是你用的是Java 8的LocalDate/LocalDateTime，建议在控制器里转成Date，或者在JS里手动拼接日期（比如new Date(slot.startDate.year, slot.startDate.monthValue - 1, slot.startDate.dayOfMonth)——注意JS的月份是从0开始的）。
• 必须加th:inline="javascript"：没有这个属性的话，Thymeleaf会完全忽略脚本里的/*[[${slots}]]*/表达式，数据根本传不进来。
• 空值处理：如果某些字段可能为空（比如dependencies），一定要在JS里设置默认值，避免出现undefined导致甘特图渲染失败。

这样修改后，当你访问/{auftragID}路径时，Thymeleaf会自动把后端的slots列表转换成JS数组，动态填充到DataTable里，就能生成对应的甘特图啦。

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