динамический список тимелина как выпадающий - PullRequest
Новая
       5

динамический список тимелина как выпадающий

0 голосов
/ 23 мая 2018

Извините, мои знания в этом разделе такие плохие ... возможно, это простая вещь.Я создаю динамический список с помощью тимиана как это (это работает): html / thymeleaf code (код также находится в конце поста)

Так как это возможно (возможно ли это?вообще) сделать каждую запись списка в виде кликабельной «строки», и когда я нажимаю на нее, она должна отображать подробное содержание записи списка ниже (как раскрывающийся список).Детали для каждой записи - другой динамический список.Первый клик открыть, второй закрыть детали.Кстати ... Я не использую JQuery, просто JS, Java, HTML, CSS и тимелист.

<body>
  <table>
    <tr>
      <th>Phasen Name</th>
      <th>PC</th>
      <th>AC</th>
      <th>EV</th>
    </tr>
    <tr th:each="Projectphase : ${evaPhasen}">
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
  </table>
</body>

Спасибо за помощь и ответы!Мануэль

1 Ответ

0 голосов
/ 23 мая 2018

Насколько я понимаю, вы пытаетесь реализовать accordion, для этого нужно немного javascript.

Основная идея: переключение отображения строки сведений, которая находится ниже текущей строки (display : none <-> display : table-row).Это делается с помощью EventListener, прикрепленного к первой td каждой строки (class='accordion'). 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      console.log(this.parentElement.nextElementSibling)
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.parentElement.nextElementSibling;
        if (panel.style.display === "table-row") {
            panel.style.display = "none";
        } else {
            panel.style.display = "table-row";
        }
    });
}
table {
  border-collapse : collapse;
}

td, th {
  border : 1px solid black
}
<table>
    <tr>
      <th>Phasen Name</th>
      <th>PC</th>
      <th>AC</th>
      <th>EV</th>
    </tr>
    <tr>
      <td class="accordion">Phasename 1 (See Details)</td>
      <td>PC1</td>
      <td>AC1</td>
      <td>EV1</td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 1</td></tr>
    <tr>
      <td class="accordion">Phasename 2 (See Details)</td>
      <td>PC2</td>
      <td>AC2</td>
      <td>EV2</td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 2</td></tr>
  </table>

Обратите внимание, что в Thymeleaf статический HTML-код (написанный для получения исполняемого фрагмента) будет заменен на: 

<table>
  <tr>
    <th>Phasen Name</th>
    <th>PC</th>
    <th>AC</th>
    <th>EV</th>
  </tr>
  <th:block th:each="Projectphase : ${evaPhasen}"
    <tr>
      <td class="accordion" th:text="${Projectphase.getphasenname()} (see details)"></td>
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 1</td></tr>
  </th:block>
</table>

Обратите внимание на использование th:block для получения 2 <tr> за одну ProjectPhase (см .: th: block Документация Thymeleaf )

Аккордеон, в значительной степени вдохновленный w3schools

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

Нет похожих вопросов

...