Блог

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

Заранее спасибо!

Код(ОТРЕДАКТИРОВАН)

Здесь я сначала проверяю, есть ли обработчики(в базе данных), затем помещаю их все в список, используя foreach, но у меня нет возможности поместить все элементы в одну ячейку(или данные таблицы, представленные здесь тегом ). Я поместил логику внутри тега, которая работала довольно хорошо, однако строки без данных получают дополнительные ячейки, как на рисунке ниже.

 lt;td gt; th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"gt;lt;/tdgt;  

Новый Код

 lt;tdgt; lt;span th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"gt;lt;/spangt;lt;/tdgt;  

Весь код

 lt;!DOCTYPE htmlgt; lt;html xmlns:th="http://www.thymeleaf.org" class="has-navbar-fixed-top"gt; lt;head th:replace="common_fragments/header :: header"gt;  lt;meta charset="utf-8"gt;  lt;link rel="stylesheet" href="../../../../public/css/font-awesome.min.css"/gt;  lt;link rel="stylesheet" href="../../../../public/css/bulma_custom.min.css"/gt; lt;/headgt; lt;bodygt;  lt;div id="navbar-top"gt;  lt;nav th:replace="logged_in/admin/fragments/navbar :: nav"gt;lt;/navgt; lt;/divgt; lt;maingt;  lt;section class="section"gt;  lt;div class="container"gt;  lt;h1 class="title"gt;  matchade studenter  lt;/h1gt;  lt;hrgt;  lt;div class="content is-medium"gt;  lt;table id="table" class="table is-bordered is-narrow is-hoverable"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Studentlt;/thgt;  lt;thgt;Student emaillt;/thgt;  lt;thgt;Student mobilnummerlt;/thgt;  lt;thgt;Enhetlt;/thgt;  lt;thgt;Handledarelt;/thgt;  lt;thgt;Handledare emaillt;/thgt;  lt;thgt;Handledare mobilnummerlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;tr th:each="place : ${places}"gt;  lt;td th:text="${place.student.studentData.name}"gt;lt;/tdgt;  lt;td th:text="${place.student.studentData.email}"gt;lt;/tdgt;  lt;td th:if="${place.student.studentData.phoneNumber} != ''" th:text="${place.student.studentData.phoneNumber}"gt;lt;/tdgt;   lt;td th:if="${place.student.studentData.phoneNumber} == ''" gt;  lt;p class="icon has-text-danger"gt;  lt;i class="fa fa-lg fa-times"gt;lt;/igt;  lt;/pgt;   lt;/tdgt;     lt;td th:text="|${place.unit.name} (Regioner: ${place.unit.municipality.getRegionNamesString}, Kommuner: ${place.unit.municipality.name})|"gt;lt;/tdgt;   lt;tdgt; lt;span th:if="${place.getHandledare} != null" th:each="handledareList : ${place.getHandledare}" th:text="${handledareList.name}"gt;lt;/spangt;lt;/tdgt;  lt;td th:if="${place.getHandledare} != null" th:text="${place.getHandledare[0].email}"gt;lt;/tdgt;    lt;td th:if="${place.getHandledare} == null"gt;  lt;p class="icon has-text-danger"gt;  lt;i class="fa fa-lg fa-times"gt;lt;/igt;  lt;/pgt;  lt;/tdgt;   lt;td th:if="${place.getHandledare} == null"gt;  lt;p class="icon has-text-danger"gt;  lt;i class="fa fa-lg fa-times"gt;lt;/igt;  lt;/pgt;  lt;/tdgt;    lt;div th:if="${place.getHandledare} != null"gt;  lt;td th:if="${place.getHandledare[0].phoneNumber} != ''" th:text="${place.getHandledare[0].phoneNumber}"gt;lt;/tdgt;  lt;/divgt;   lt;div th:if="${place.getHandledare} == null"gt;  lt;td gt;  lt;p class="icon has-text-danger"gt;  lt;i class="fa fa-lg fa-times"gt;lt;/igt;  lt;/pgt;   lt;/tdgt;  lt;/divgt;   lt;div th:if="${place.getHandledare} != null"gt;  lt;td th:if="${place.getHandledare[0].phoneNumber} == '' "gt;   lt;p class="icon has-text-danger"gt;  lt;i class="fa fa-lg fa-times"gt;lt;/igt;  lt;/pgt;  lt;/tdgt;   lt;/tdgt;  lt;/divgt;     lt;/trgt;  lt;/tbodygt;   lt;/tablegt;  lt;brgt;  lt;button class="button is-large is-success" id="download-button"gt;ladda ner matchning resultatlt;/buttongt;  lt;brgt;  lt;brgt;   lt;/divgt;  lt;/divgt;  lt;/sectiongt; lt;/maingt;  lt;footer th:replace="common_fragments/footer :: footer"gt;lt;/footergt;     lt;scriptgt;  function htmlToCSV(html, filename) {  var data = [];  var rows = document.querySelectorAll("table tr");   for (var i = 0; i lt; rows.length; i  ) {  var row = [], cols = rows[i].querySelectorAll("td, th");   for (var j = 0; j lt; cols.length; j  ) {  row.push(cols[j].innerText);  }   data.push(row.join(";"));  }   downloadCSVFile(data.join("n"), filename);  } lt;/scriptgt;   lt;scriptgt;  function downloadCSVFile(csv, filename) {  var csv_file, download_link;   csv_file = new Blob(["uFEFF" csv], {type: "text/csv"});   download_link = document.createElement("a");   download_link.download = filename;   download_link.href = window.URL.createObjectURL(csv_file);   download_link.style.display = "none";   document.body.appendChild(download_link);   download_link.click();  } lt;/scriptgt;  lt;scriptgt;  document.getElementById("download-button").addEventListener("click", function () {  var html = document.querySelector("table").outerHTML;  htmlToCSV(html, "matchning.csv");  }); lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Вы можете переместить свою логику Thymeleaf из lt;tdgt; тега в тег внутри lt;tdgt; тега — например, lt;spangt; :

 lt;tdgt;  lt;span th:if="${place.getHandler} != null"   th:each="handlerList : ${place.getHandler}"   th:text="${handlerList.name}"gt;lt;/spangt; lt;/tdgt;  

Оттуда вы можете добавить любой CSS, который вам может понадобиться для форматирования промежутков.

Если у вас есть дополнительные lt;tdgt; ячейки, которые необходимо подавить, переместите th:if выражение внутрь lt;tdgt; тега:

 lt;td th:if="${place.getHandler} != null"gt;  lt;span th:each="handlerList : ${place.getHandler}"   th:text="${handlerList.name}"gt;lt;/spangt; lt;/tdgt;