Флажок ввода с использованием Materialise CSS и Thymeleaf - PullRequest
Новая
       38

Флажок ввода с использованием Materialise CSS и Thymeleaf

0 голосов
/ 20 февраля 2020

Привет, я использую Spring Boot и Spring Web с Thymeleaf. Для внешнего интерфейса я использую Materialize CSS и таблицы данных с этим стилем CSS / JS.

Я хочу отобразить таблицу, в которой пользователь может выбирать наборы данных, которые там анализируются с помощью итерации Thymeleaf. Я попытался сделать это с формой CheckBoxWrapper, которая содержит список элементов CheckBox. Сами элементы CheckBox содержат одно логическое значение. Вы можете найти мой полный код в конце этого вопроса.

Но если я попытаюсь сделать это так (я думаю?), Thymeleaf создаст другое скрытое поле ввода сразу после флажка. HTML в браузере выглядит как this , в результате чего флажок не отображается браузером. Если я (пере) перемещу сгенерированный скрытый ввод за пределы метки, флажок будет отображаться правильно. См. Разницу на этой картинке

Есть ли способ, чтобы флажок отображался правильно, при этом все еще можно получить ввод флажка на сервер? (с 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
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";
    }
}

Код - CheckBox 

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

}

1 Ответ

0 голосов
/ 21 февраля 2020

Если вы можете переместить скрытый ввод над флажком, все в порядке: 

<label>
   <input type="hidden" name="_list[0].val" value="on"><!-- First is ok! -->
   <input type="checkbox" /><!-- I still display -->
   <span>Red</span>
</label>

Codepen

Просто отметим, что разметка очень строгая здесь - как и в каждом уникальном флажке, а спаривание диапазонов должно быть заключено в собственную метку. Любое отклонение от этого приведет к поломке компонента.

https://materializecss.com/checkboxes.html

...