Проблема динамического заполнения модального пространства с помощью ThymeLeaf и Spring MVC - PullRequest
0 голосов
/ 07 ноября 2018

Это моя ГЛАВНАЯ страница.

enter image description here

Когда пользователь выбирает центр обработки данных, страница перенаправляется и показывает список FisicHost, доступных для этого центра данных.

Класс ЦОД

@Entity
@Transactional
public class Datacenter {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;

    private String name;

    @OneToMany(mappedBy = "datacenter")
    @LazyCollection(LazyCollectionOption.FALSE)
    private List<FisicHost> fisicHostList;

  // I've cut the constructor and get/set to make it shorter
}

В этом представлении пользователь перенаправляется при выборе центра обработки данных:

enter image description here

каждая строка в представлении представляет объект FiscHost, который доступен для выбранного центра обработки данных.

Класс FisicHost

@Entity
@Transactional
public class FisicHost {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@ManyToOne(fetch=FetchType.EAGER)
private Datacenter datacenter;

@OneToMany(mappedBy = "fisicHost")
@LazyCollection(LazyCollectionOption.FALSE)
private List<Credential> credentials;

private String name;
private String ip;
private String operatingSystem;
private String notes;
}

Это метод контроллера, обрабатывающий второе представление (которое отображает список доступных FisicHost для этого центра обработки данных):

@RequestMapping(value = "/chosenDatacenter", method = RequestMethod.POST)
public String datacenterPostHandler(@RequestParam("datacenterList") String name, ModelMap modelMap){
    List<Datacenter> allDatacenters = datacenterDao.getAllDatacenters();
    for (Datacenter dc : allDatacenters) {
        if (dc.getName().equals(name)) {
        modelMap.put("datacenter", dc);
        if(dc.getFisicHostList().size() != 0) {
            List<FisicHost> datacenterFisicHosts = dc.getFisicHostList();
            modelMap.put("datacenterFisicHosts", datacenterFisicHosts);
            for(FisicHost fh : datacenterFisicHosts){
                if(fh.getCredentials().size() != 0){
                    modelMap.put("fisicHostCredentialsList", credentialDao.getAllCredentialsByFisicHost(fh));
                }
            }
        }
        return "chosenDatacenter";
        }
    }
        return null;
}

Если пользователь нажимает кнопку «CREDENCIALES», появляется модальное окно, отображающее все учетные данные, доступные для этого FisicHost.

Класс доступа:

@Entity
public class Credential {

    @Id
    private int id;

    @ManyToOne(fetch= FetchType.EAGER)
    private FisicHost fisicHost;

    private String user;
    private String password;
    private String notes;
    private String role;
}

enter image description here

Все это работает нормально, НО здесь возникает проблема ...

Какая бы кнопка не была нажата, открывается модальное окно, отображающее ВСЕ учетные данные для ВСЕХ FisicHosts внутри ЦОД, и я ТОЛЬКО хочу показать учетные данные для конкретного FisicHost, который был нажат в соответствующем центре данных!

Я знаю эту логику в контроллере:

 for(FisicHost fh : datacenterFisicHosts){
                if(fh.getCredentials().size() != 0){
                    modelMap.put("fisicHostCredentialsList", credentialDao.getAllCredentialsByFisicHost(fh));
                }

возвращает только последнюю итерацию цикла, поэтому он всегда возвращает учетные данные для этого FisicHost, несмотря ни на что! И это то, что происходит, но я не могу найти другой способ сделать это ...

На всякий случай, вот метод getAllCredentialsByFisicHost () из класса CredentialDaoImpl:

@Override
public List<Credential> getAllCredentialsByFisicHost(FisicHost fisicHost) {
    // Open a session
    Session session = sessionFactory.openSession();

    Criteria c = session.createCriteria(Credential.class).add(Restrictions.eq("fisicHost.id", fisicHost.getId()));

    List<Credential> allCredentials = c.list();

    // Close the session
    session.close();

    return allCredentials;
}

Пожалуйста, помогите, потому что я схожу с ума от этого !!!

Большое спасибо всем:)

PS: это шаблон selectedDatacenter , который визуализируется с помощью ThymeLeaf:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Generic View</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/choosenDatacenter.css}" />
</head>

<body>

<form id="form" action="/getJson" th:object="${datacenterFisicHosts}" method="post">

    <table>
        <tr class="row">
            <th class="tableHeader">Nombre</th>
            <th class="tableHeader">IP</th>
            <th class="tableHeaders">Sistema Operativo</th>
            <th class="tableHeaders">Notas</th>
        </tr>

        <th:block th:each="fh : ${datacenterFisicHosts}">
        <div id="fila">
            <tr class="row">
                <td id="fisicHostName" th:text="${fh.name}"></td>
                <td id="fisicHostIp" th:text="${fh.ip}"></td>
                <td id="fisicHostOS" th:text="${fh.operatingSystem}"></td>
                <td id="fisicHostNotes" th:text="${fh.notes}"></td>
                <td><button type="button" th:onclick="'javascript:openCredentialModal()'">CREDENCIALES</button></td>
            </tr>
        </div>
        </th:block>
    </table>

</form>


<!-- Modal -->
<div class="modal fade" id="modalCredenciales" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Credenciales</h5>
            </div>
            <div class="modal-body">
                <table>
                    <tr class="row">
                        <th class="tableHeader">Usuario</th>
                        <th class="tableHeader">Clave</th>
                        <th class="tableHeaders">Notas</th>
                    </tr>

                    <th:block th:each="credential : ${fisicHostCredentialsList}">
                        <tr class="row">
                            <td id="credentialUser" th:text="${credential.user}"></td>
                            <td id="credentialPassword" th:text="${credential.password}"></td>
                            <td id="credentialRole" th:text="${credential.notes}"></td>
                        </tr>
                    </th:block>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{js/jquery-1.11.3.js}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script th:src="@{js/chosenDatacenter.js}"></script>
</body>
</html>

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете использовать Ajax для передачи идентификатора вашему контроллеру и заставить его возвращать только соответствующие учетные данные, как объяснено здесь .

В вашем контроллере вы добавляете метод, который возвращает правильный список учетных данных, принимая идентификатор fisicHost в качестве параметра:

@RequestMapping("/fisicHost/{id}")
public String fisicHost credentials(@PathVariable("id") String id, ModelMap model) 
{
    //find credentials by fisicHost using your DAO and add them to model
    return "modal/credentials :: modalContents";
}

Вам понадобится фрагмент Thymeleaf 'modalContents', чтобы отобразить учетные данные, добавленные в модель.

Затем в событии onClick вы можете использовать Ajax для вызова URL с правильным идентификатором и отображения данных. В вашем шаблоне у вас будет:

th:onclick="'javascript:openCredentialModal(\'' + ${fh.id} + '\');'"

Функция Ajax просто вызывает URL-адрес вашего контроллера, передавая идентификатор id, и возвращает HTML-код из фрагмента тимилиста. Затем он упаковывает html-контент в модальный режим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...