嘿，我正在使用 Spring Boot 和 Spring Web 以及 Thymeleaf。对于前端，我使用 MaterializeCSS 和数据表 this CSS/JS 样式。
我想显示一个表，用户可以在其中选择通过 Thymeleaf 迭代解析的数据集。我尝试使用包含 CheckBox 元素列表的 CheckBoxWrapper 形式来完成此操作。复选框元素本身包含一个 boolean 值。 您可以在本问题末尾找到我的完整代码。
但是如果我尝试这样做(我认为？)，Thymeleaf 会在复选框之后直接生成另一个隐藏输入字段。浏览器中的 HTML 看起来像 this 这会导致浏览器不显示该复选框。如果我(重新)将生成的隐藏输入移到标签之外，则复选框将正确显示。 See the difference on this picture
有没有办法让复选框正确显示，同时仍然能够将复选框输入到服务器？ (与 thymeleaf )
如果您需要有关任何问题的其他信息，请告诉我。
代码 - HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
lang="en">
<head>
<meta charset="UTF-8">
<title>This is some really important detail</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" th:href="@{/css/materialize.css}" />
<link rel="stylesheet" th:href="@{/css/datatables.css}" />
</head>
<body>
<div class="container">
<div id="admin" class="col s10 offset-s1">
<div class="card material-table">
<div class="table-header">
<span class="table-title">Table Headline</span>
<div class="actions">
<a href="#" class="search-toggle waves-effect btn-flat nopadding"><i class="material-icons">search</i></a>
</div>
</div>
<form action="/submit" th:object="${checkBoxWrapper}">
<table id="datatable">
<thead>
<tr>
<th>Check</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<th:block th:each="element,status : ${persons}">
<tr>
<td>
<div>
<label>
<input type="checkbox" th:id="'checkbox'+${status.index}"
th:field="*{list[__${status.index}__].val}"/>
<span>Desc</span>
</label>
</div>
</td>
<td>
<th:block th:text="${element.name}"> -</th:block>
</td>
</tr>
</th:block>
</tbody>
</table>
</form>
</div>
</div>
</div>
</body>
<script th:src="@{/webjars/datatables/1.10.20/js/jquery.dataTables.js}"></script>
<script th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>
<script th:src="@{/script/datatables.js}"></script>
<script th:src="@{/script/materialize.js}"></script>
</html>
代码 - Controller
@Controller
public class MyController {
@GetMapping("/")
public String home(Model model){
List<Person> pList = new ArrayList<>();
pList.add(new Person("Mick"));
pList.add(new Person("Kevin"));
pList.add(new Person("Joe"));
model.addAttribute("persons", pList);
List<CheckBox> cList = new ArrayList<>();
for (int i = 0; i < pList.size(); i++) {
cList.add(new CheckBox(false));
}
CheckBoxWrapper checkBoxWrapper = new CheckBoxWrapper(cList);
model.addAttribute("checkBoxWrapper", checkBoxWrapper);
return "/home";
}
@PostMapping("/submit")
@ResponseBody
public String submit(@ModelAttribute CheckBoxWrapper checkBoxWrapper){
return "success";
}
}
代码 - 复选框
public class CheckBox {
private boolean val;
//Getter, Setter, Constructor
}
代码-CheckBoxWrapper
public class CheckBoxWrapper {
List<CheckBox> list = new ArrayList<>();
//Getter, Setter, Constructor
}
代码 - 人员
public class Person{
String name;
//Getter, Setter, Constructor
}
最佳答案
如果您可以将隐藏的输入移动到复选框上方，那就很好:
<label>
<input type="hidden" name="_list[0].val" value="on"><!-- First is ok! -->
<input type="checkbox" /><!-- I still display -->
<span>Red</span>
</label>
请注意，这里的标记非常严格 - 因为每个唯一的复选框和范围配对都必须包含在自己的标签中。任何与此的变化都会破坏组件。
关于java - 使用 MaterializeCSS 和 Thymeleaf 进行复选框输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60327892/