Блог

Главная - Вопросы по программированию - Пружинный загрузочный лист Thymeleaf — Разделение данных на 2 столбца

Пружинный загрузочный лист Thymeleaf — Разделение данных на 2 столбца

#spring #spring-boot #thymeleaf

Вопрос:

Я использую spring boot 2.5 вместе с Thymeleaf 3.0.12. У меня есть список строк, которые я хочу отобразить в двух столбцах. Ниже приведен фрагмент кода, который я использую на данный момент:

 <div class="row">
    <div class="col-sm-6">
        <div class="form-check"  th:each="service : ${services}" th:if="${serviceStat.odd}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_' serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr' '_' serviceStat.count}"></label>
        </div>
    </div>  
    <div class="col-sm-6">
        <div class="form-check" th:each="service : ${services}" th:if="${serviceStat.even}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_' serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr' '_' serviceStat.count}"></label>
        </div>
    </div>
</div>

Это работает, как и ожидалось.
введите описание изображения здесь

Но для этого подхода требуется два раза повторять список. Я сомневаюсь, что мой список огромен, моя страница может замедлиться. Есть ли способ добиться того же самого за одну итерацию?

Комментарии:

1. Почему бы не использовать CSS для создания столбцов?

2. Откуда берется serviceStat?

3. @aksappy это агрегация переменной, «службы» и суффикса «Статистика», которая будет автоматически доступна в Thymeleaf

4. Является ли четная / нечетная статистика в сервисах с соотношением 1:1? Если это так, col-sm-6 то автоматически сохранит их в двух столбцах, и потребуется только один цикл.

5. @aksappy я тебя не понял ? Как?

Ответ №1:

Мы можем сделать это за один цикл. Хитрость заключается в том, чтобы выполнить th:each с col-sm-6 div, и bootstrap позаботится о выравнивании их в двух столбцах. У операции, оказывается, есть th:each внутренняя col-sm-6 часть div.

 <div class="row">
    <div class="col-sm-6" th:each="service : ${services}">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_' serviceStat.count}"/>
            <label  class="form-check-label" th:text="${'myStr' '_' serviceStat.count}"></label>
        </div>
    </div>
</div>

ПРИМЕЧАНИЕ — col-sm-6 это точка останова для небольших экранов. Использовать https://getbootstrap.com/docs/4.1/layout/grid/#grid-options чтобы выбрать правильные точки останова для ваших требований.

Метки: