Spring boot + Thymeleaf показывает записи базы данных в пользовательских фрагментах - PullRequest
Новая
       143

Spring boot + Thymeleaf показывает записи базы данных в пользовательских фрагментах

0 голосов
/ 27 мая 2020

У меня есть записи в базе данных, которые я хочу показать на странице определенным образом. По этой причине я создал фрагмент тимелеафа, который следует использовать в качестве шаблона для всех записей в моей базе данных. Теперь я не уверен, как заставить каждый фрагмент (представляющий запись db) печатать рядом друг с другом. Более того, я хочу добиться чего-то вроде этого:

enter image description here

Моя текущая реализация показывает все выбранные записи в одном и том же месте на веб-странице, что создает что-то вроде «стек» и показывает только последнюю запись. Моя текущая реализация выглядит так:

enter image description here

Подводя итог, я хочу добиться чего-то вроде CardView при разработке Android. Я прошел через множество руководств по тимелеафу, но все они, похоже, посвящены организации данных в таблицах, что не является моей целью. На данный момент я не уверен, можно ли достичь целевых функций, показанных на картинке, только с помощью тимелеафа.

Надеюсь, кто-нибудь может дать мне подсказку или совет о том, как я могу достичь желаемого результата. Стоит ли искать в каких-нибудь JS фреймворках? Или это может быть достигнуто с помощью тимелеафа?

Моя попытка достичь этой функциональности до сих пор привела к получению следующего кода. 

<div th:fragment="officer">
<div class="officerWrapper" th:block th:each="officer : ${officers}">
    <div class="officerLeft">
        <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRTw8mKnjVErhmhl5S_aUZfvf86vwZOMJBqbUqM-guT-kv6K4xu&usqp=CAU"
            alt="user" width="100" height="150">
    </div>
        <div class="right">
            <p>
                Name :
                <td th:text="${officer.firstName}">
            </p>
            <p>
                Surname :
                <td th:text="${officer.lastName}">
            </p>
            <p>
                Mobile:
                <td th:text="${officer.mobile}">
            </p>
            </br>
            <p>Статут: Наличен</p>
            </br>
            <button class="button button1" name="editOfficer">Edit</button>
        </div>
</div>
</div>

И css идет .. 

    *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}

.officerWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 350px;
  height: 150px;
  display: flex;
  box-shadow: 0 10px 20px 0 rgba(69,90,100,.08);

}

.officerWrapper .officerLeft{
  width: 65%;
  background: #38584A;
  padding: ;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  text-align: center;
  color: #fff;
}

.officerWrapper .officerLeft img{

  border-radius: 0px;
  margin-bottom: 0px;
  width:100%;
  height:100%;

}

.officerWrapper .right{
  background:#38584A;
  width:100%;
  padding: 10px 10px 10px 10px;
  color:#fff;
  font-weight: bold;
}

.button1 {
  border: 2px solid #4CAF50;
}

1 Ответ

0 голосов
/ 28 мая 2020

Вы определенно можете достичь этого без js и только с html и css, потому что это проблема стиля, поэтому все, что вам нужно, это правильный css.

Причина, по которой все ваши карты уложены прямо сейчас, это то, что вы позиционируете каждую карту в одной и той же точке пространства (середина экрана) с помощью следующих строк: 

  .officerWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  ... }

Вы можете добиться того, чего хотите, используя flexbox или css сетка. Ни один из них не лучше другого, поэтому вам нужно будет посмотреть, что вам подходит. Я оставлю вам несколько ссылок для проверки.

Ссылки

...