Thymeleaf - 未在 th:each 中设置复选框的选中属性或如何正确恢复之前选中的复选框列表

Question

在我的应用程序中，我想创建一个新的 Risk（ Risk 对象的一个​​实例），当它被创建时，我想显示 5 个复选框和三个单选按钮。选定的选项特定于 Risk 对象的每个实例。

后来我想显示所有添加的风险的列表，每个风险上都有一个编辑选项按钮。我希望我的应用程序恢复特定于选定风险的视图（当单击选定风险上的“编辑”按钮时） - 风险名称、所有复选框和单选按钮均按先前选中的方式选中。我希望能够再次编辑这些复选框选择，以便所有新更改都正确反映在 MySQL 中。

作为 Thymeleaf 的新手，我做了以下事情：

<div th:each="top : ${topic}">
    <input type="checkbox" th:field="*{topic}" th:checked="${top.checked}" th:value="${top.name}"/><label th:text="${top.name}">Something is wrong !</label>
</div>

我确定 Controller 和 Hibernate/MySQL 部分工作正常（我使用 Logs 进行了检查）。

这工作得很好 - 但前提是我只选择了一个复选框（最初是在我添加风险时）。

如果我选择了多个复选框（添加风险时），然后选择此风险进行编辑，则不会选中任何复选框。

怎么了 ？

Answer 1

经过一番研究，我在 Thymeleaf 的文档中发现了以下文字：

“...... th:field 会处理这个问题，并且会在相应的输入标签中添加一个 checked="checked" 属性。”。

我也找到了这个指导：

http://forum.thymeleaf.org/The-checked-attribute-of-the-checkbox-is-not-set-in-th-each-td3043675.html

然后我设法开发了几个小应用程序，我想分享我的发现并希望它可以帮助某人。（可能对有经验的人来说太详细了，但我希望所有人都清楚）

我不想重复上面提到的 Thymeleaf 论坛页面中已有的内容（详细信息请参阅管理员的第一个回复/解释 - 论坛主题中的第二个） - 只想做一个小总结并强调几点：

• 使用 th:each 时，您确实不需要添加“已检查”；

• 您必须添加 th:field=" {…}" ，它应该具有模型类中的字段名称（Thymeleaf 称为表单支持 bean - th:object ）与复选框相关。更多相关信息：我在上面说过我的“表单支持 bean”是 Risk.java。对于每个 Risk 对象实例，选中的复选框代表特定于该 Risk 实例的主题。并且选定的主题被分配给 Risk.java 实例的字段“主题”（因此在保存实例时在 MySQL 的相关表中）。在我的例子中，该字段的名称应该在 th:field=" {...}" 中作为 th:field="*{topic}"。当您选择复选框时，Thymeleaf 将使用其 setTopic 方法将选定值保存到 Risk.java 的主题字段，并且当它需要恢复视图时，Thymeleaf 将使用 Risk.getTopic 方法获取有关先前选定项目的信息。

• 复选框（或单选按钮）的所有值都应该来自另一个来源 - 如果您需要一组静态复选框，或者如果您需要动态生成复选框，您可以使用一个类（我需要一组静态复选框）对于我的应用程序，但我决定尝试创建一个动态的应用程序 - 请参阅下面指向我的 Github 存储库的链接以查看我设法开发的代码）。因此，对于我的应用程序，我创建了一个枚举主题，其中包含复选框的所有值和枚举类型的所有值以及单选按钮的所有值。然后在您的控制器类中，您应该将所有值添加到 Model 的属性中 - 我在使用 Enum 时这样做了：

  model.addAttribute("topics", Topics.values());
  model.addAttribute("types", Types.values());
  

（如果您需要动态的，请执行以下操作：

    model.addAttribute("topics", topicsService.findAll());
    model.addAttribute("types", typesService.findAll());

)

那么你应该有类似的东西：

    <div>
            <div th:each="top : ${topics}">
                <input type="checkbox" th:field="*{topic}"  th:value="${top.id}"/><label th:text=" | &nbsp; ${top.name}|">Something is wrong !</label>
            </div>
    </div>

    <div>
            <div th:each="typ : ${types}">
                <input type="radio" th:field="*{type}"  th:value="${typ.id}"/><label th:text="| &nbsp; ${typ.name} |">Something is wrong !</label>
            </div>
    </div>

在哪里：

• 如前所述，th:field=" {topic}" 对应于表单支持模型类 - Risk.java 的字段。th:field=" {type}" 相同；

• th:each="top : ${topics}" 中的主题应该与您在控制器中提供的属性名称匹配。

最重要的部分是 th:field="*{topic}" 应该返回一个数组。

th:field="*{topic}" 返回所选项目的数组和 th:each 返回所有选项的数组 当第一个数组中的值匹配第二个数组中的值时，Thymeleaf 现在应该能够将复选框/单选按钮标记为已选中。

由于在单选按钮的情况下，您只能选择一个选项 th:field=“*{type}” 实际上并不返回数组 - 它只返回一项。但在复选框的情况下，它应该是一个数组 - 因此 Risk.java 中的“主题”字段必须返回一个数组。

为此，我们需要一个转换器——一个名为 StringListConverter 的类，它实现了 AttributeConverter……。

（我在这里学习了如何做到这一点。如果不是 www.stackoverflow.com 中的这个答案，我将无法完成此应用程序，也不会编写所有这些内容：https ://stackoverflow.com/a/34061723/6332774 )

然后在您的表单支持模型类 - Risk.java 在我的情况下，您需要执行以下操作：

@Convert(converter = StringListConverter.class)
private List<String> topic = new ArrayList<>();

private String type;

类型可以只是一个字符串。

这就对了。

（我想以表格形式显示复选框，指示所需的列数 - 我可以做到，但我不确定它有多干净或有多安全。相关代码在下面链接的示例项目中的 riskformtable.html 中。

我在这里发布了一个相关问题 - Thymeleaf - 使用 th:each 时以表格形式显示复选框 - 我在做什么安全吗？

此外，我想对我的风险列表中具有偶数序列号的所有风险项目使用不同的颜色 - 它在 index.html 中

使用下面的链接查看完整的示例代码）

链接到我的 GitHub 存储库：

• 带有一组静态复选框的示例：https : //github.com/aripovula/Spring-Thymeleaf_checkboxes_and_radiobuttons

• 动态生成复选框的示例：https : //github.com/aripovula/Spring-Thymeleaf_dynamic_checkboxes_n_radio-buttons