Fatal编程技术网
  • java/
  • Java 使用MaterializeCS和Thymeleaf的复选框输入

Java 使用MaterializeCS和Thymeleaf的复选框输入

java html datatables

Java 使用MaterializeCS和Thymeleaf的复选框输入,java,html,datatables,thymeleaf,materialize,Java,Html,Datatables,Thymeleaf,Materialize,嘿，我正在使用SpringBoot和SpringWeb与Thymeleaf。对于前端，我使用带有样式CSS/JS的MaterializeCS和datatables 我想显示一个表，用户可以在其中选择通过Thymeleaf迭代解析的数据集。我试着用一种包含复选框元素列表的CheckBoxWrapper形式来实现它。复选框元素本身包含一个布尔值。 你可以在这个问题的末尾找到我的完整代码 但是如果我尝试这样做（我想？），Thymeleaf会在复选框后面直接生成另一个隐藏的输入字段。浏览器中的HTML如

嘿，我正在使用SpringBoot和SpringWeb与Thymeleaf。对于前端，我使用带有样式CSS/JS的MaterializeCS和datatables

我想显示一个表，用户可以在其中选择通过Thymeleaf迭代解析的数据集。我试着用一种包含复选框元素列表的CheckBoxWrapper形式来实现它。复选框元素本身包含一个布尔值。 你可以在这个问题的末尾找到我的完整代码

但是如果我尝试这样做（我想？），Thymeleaf会在复选框后面直接生成另一个隐藏的输入字段。浏览器中的HTML如下所示 这将导致浏览器不显示该复选框。如果我（重新）将生成的隐藏输入移到标签外，复选框将正确显示。

是否有一种方法可以使复选框正确显示，同时仍然能够将复选框输入到服务器？（配百里香）

如果您需要有关任何问题的其他信息，请让我知道

代码-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>
代码-CheckBoxWrapper

public class CheckBoxWrapper {

    List<CheckBox> list = new ArrayList<>();

    //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>


红色

需要注意的是，这里的标记非常严格，因为每个唯一的复选框和span配对都必须包装在自己的标签中。与此不同的任何变化都会损坏组件

以公认的答案为出发点（关键是输入的顺序很重要），我设法找到了一种只需要最少js的解决方法。只需要手动创建隐藏字段和复选框，并适当命名它们，这样Spring就可以在提交时找到它们各自的值。隐藏字段的前缀必须为“u”，并且复选框的id末尾必须有一个数字索引。每个字段的值都可以使用Thymeleaf表达式从支持字段派生。 例如，如果名为“myForm”的支持对象有一个名为“mySwitch”的字段，则可以执行以下操作：

<label>
   <input type="hidden" name="_mySwitch" th:value="${myForm.mySwitch} ? 'on'">
   <input type="checkbox" id="mySwitch1" name="mySwitch" th:value="${myForm.mySwitch} ? 'true'" th:checked="${myForm.mySwitch} ? 'checked'">
   Off
   <span class="lever"></span>
   On
</label>
这将正确读取Spring@ModelAttribute中的当前值，并在页面加载时为开关设置适当的状态，以及在提交时提供正确的值。希望这对某人有所帮助。

谢谢您的回复！那么，您建议如何更改订单？仅仅使用JS？JS就可以了，这很有意思，但可能是你唯一的选择。更好的方法是控制Thymeleaf输出隐藏输入的方式/时间/地点。你有任何选择来操作它吗？我不知道我在哪里可以告诉thymeleaf把这个隐藏的输入放在复选框上面。我和JS一起工作。如果我找到更好的解决方案，我将与大家分享：） 
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>

<label>
   <input type="hidden" name="_mySwitch" th:value="${myForm.mySwitch} ? 'on'">
   <input type="checkbox" id="mySwitch1" name="mySwitch" th:value="${myForm.mySwitch} ? 'true'" th:checked="${myForm.mySwitch} ? 'checked'">
   Off
   <span class="lever"></span>
   On
</label>

$('#mySwitch1').click(function(){
   if ($(this).is(":checked")){
      $(this).val('true');
      $('#_mySwitch').val('on');
   }else{
      $('#_mySwitch').val('');
   }
});