Возьмите элемент из таблицы и отредактируйте его модально в SpringBoot / Thymeleaf - PullRequest
0 голосов
/ 12 апреля 2019

У меня есть таблица, которая просматривает все журналы и помещает каждый журнал и его соответствующие детали в строку.Я хочу щелкнуть строку, в которой появляется модальное окно с информацией журнала этой строки, чтобы я мог ее редактировать.Я не уверен, как получить этот конкретный журнал в SpringBoot для вставки в th: object = "$ {}" в форме, так как я не могу поместить объект одного журнала в функцию контроллера, потому что я не знаюна который люди будут нажимать.Как мне получить информацию об идентификаторе / журнале в зависимости от того, на какую строку таблицы они щелкнули, чтобы заполнить модал?

Будет ли лучший способ использовать javascript?Или мне нужно добавить какую-то логику в контроллер?

Вот таблица:

                        <table class="table table-striped" data-toggle="table" data-show-toggle="true" data-classes="table-no-bordered" data-striped="true" data-search="true"  data-show-columns="true" data-pagination="true">
                            <thead>
                            <tr>
                                <th>When</th>
                                <th>Subject</th>
                                <th>Notes</th>
                                <th class="text-right"><a class="btn btn-default"><span class="fa fa-pencil"></span></a></th>
                                <th class="text-right"><a class="trigger btn btn-default"><span class="fa fa-plus"></span></a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="log : ${logs}">
                                <td th:if="${log.time!=null}" th:text="${{#temporals.format(log.time,'MM/dd/yyyy HH:mm a')}}"></td>
                                <td th:text="${log.subject}"></td>
                                <td style="white-space: pre-wrap;" th:text="${log.notes}"></td>
                                <td class="text-right"><a th:value="${log}" class="trigger-edit-log"><span class="fa fa-pencil"></span></a></td>
                                <td class="text-right"><a th:href="@{|/delete/callLog/${log.id}|}"><span class="fa fa-trash"></span></a></td>
                            </tr>
                            </tbody>
                        </table>

Вот javascript, чтобы открыть модал. Я попытался установить кликованную строку для переменной callLog и вставил ее в th: объект модала, но этоне работал:

            $(document).on('click', '.trigger-edit-log', function (event) {
                event.preventDefault();
                var callLog = $(this);
                $('#modal-edit-log').iziModal('open');
            });

Вот модал

                <div id="modal-edit-log" data-izimodal-title="Edit Log" class="modal">
                    <form th:action="@{/save/log}" th:object=??? method="post" style="padding:0 10px;">
                        <br/>
                        <!--<input type="hidden" th:field="*{id}"/>-->
                        <!--<input type="hidden" th:value="*{client.id}" th:name="client" th:id="client"/>-->
                        <div class="row">
                            <div class="col-xs-4 col-sm-3 text-right"><label>Subject:</label></div>
                            <div class="col-xs-8 col-sm-7"><input type="text" class="form-control" th:field="*{subject}"/> </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-xs-4 col-sm-3 text-right"><label>Notes:</label></div>
                            <div class="col-xs-8 col-sm-7"><input type="text" class="form-control" th:field="*{notes}"/> </div>
                        </div>
                        <br/>
                        <div class="text-right">
                            <input type="submit" value="Submit" class="btn btn-default"/>
                        </div>
                        <br/>
                    </form>
                </div>

Мой контроллер, если вам нужно его увидеть:

    @RequestMapping(value="/callLogs/client/{id}")
    public String getCallLogs(Model model, @PathVariable("id") Long id){
        Client client=clientRepository.findById(id);
        CallLog newCallLog=new CallLog();
        List<CallLog> logs=callLogRepository.findByClientOrderByTimeDesc(client);
        List<Role> assignees= roleRepository.findByIsTaskAssignee(true);
        List<Task> tasks=taskRepository.findByClient(client);

        model.addAttribute("assignees",assignees);
        model.addAttribute("newTask",new Task());
        model.addAttribute("tasks",tasks);
        model.addAttribute("client",client);
        model.addAttribute("logs",logs);
        model.addAttribute("newCallLog",newCallLog);
        return ("callLogs");
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...