ThymeLeaf - данные таблицы POST (ArrayList) для другого контроллера

Question

Мне трудно связать ObjectList в POST Thymeleaf.

Я пытаюсь выполнить следующие требования, используя Spring 5 и ThymeLeaf

1. User uploads a Excel File
2. Display data in HTML Table (For Java Script Data Validation)
3. Allow User to Delete Invalid Rows  (from Inmemory User Specific ArrayList)
4. Display Remaining Values
5. POST valid remaining values to Server

Я планирую добавить кнопку удаления в каждой строке. И кнопка Отправить, чтобы сохранить все оставшиеся строки в БД.

Как я могу переслать eachRowList на другой контроллер (для действия удаления и сохранения БД).

@PostMapping("/load-excel")
public ModelAndView loadFile(@RequestParam("fileName") MultipartFile file,
         @RequestParam("selectedApplicationName") String selectedApplicationName,RedirectAttributes redirectAttr,Model model) {

        List<EachRowinExcel> eachRowList = fileReaderService.convertExceltoObjList();
        ....

        modelAndView.addObject("eachRowList", eachRowList);

        return modelAndView;
}



 <tr th:each="eachRow : ${eachRowList}">
              <td th:text="${eachRow.column1}"></td>
              <td th:text="${eachRow.column2}"></td>
              <td th:text="${eachRow.column3}"></td>
              <td th:text="${eachRow.column4}"></td>
              <td th:text="${eachRow.column5}"></td>
              <td th:text="${eachRow.column6}"></td>
              <td th:text="${eachRow.column7}"></td>
              <!-- Special Columns -->
              <th:block th:each="customColumnValue:${eachRow.customColumnsList}">
                <td th:text="${customColumnValue}"></td>
              </th:block> 

            </tr>

Обновление 1:

Модифицированный вид

<form action="#" th:action="@{/access/delete}" th:object="${form}" method="post">
    <table id="accessRequestDataTable"  class="display compact" style="width:100%">
      <thead>
        <tr>
          <!-- Headers -->       
        </tr>
      </thead>
      <tbody>
     <tr th:each="eachRow, iter : ${form.eachRowList}">
          <td  th:text="${eachRow.accessReqeustCounter}" th:field="*{eachRowList[__${iter.index}__].accessReqeustCounter}"></td>
          <td  th:text="${eachRow.accessReqeustID}" th:field="*{eachRowList[__${iter.index}__].accessReqeustID}"></td>
          <td  th:text="${eachRow.accessRequestType}" th:field="*{eachRowList[__${iter.index}__].accessRequestType}"></td>
          <td  th:text="${eachRow.userProfile}" th:field="*{eachRowList[__${iter.index}__].userProfile}"></td>
          <td  th:text="${eachRow.userFinalName}" th:field="*{eachRowList[__${iter.index}__].userFinalName}"></td>
          <td  th:text="${eachRow.userLoginName}" th:field="*{eachRowList[__${iter.index}__].userLoginName}"></td>
          <td  th:text="${eachRow.userEmail}" th:field="*{eachRowList[__${iter.index}__].userEmail}"></td>

          <td>              
            <button class="btn btn-danger btn-sm" 
            type="submit" value="submit">Delete</button>             
          </td>
        </tr>        

      </tbody>
    </table>
  </form>

POST-контроллер

@RequestMapping(value = "/access/delete", method = RequestMethod.POST)
public ModelAndView deleteUserFromTable(@ModelAttribute("form") EachRowListWrapper eachRowListWrapper){
    System.out.println(eachRowListWrapper.getEachRowList().size());
    ModelAndView modelAndView = new ModelAndView();
    eachRowListWrapper.getEachRowList().remove(0);
    modelAndView.setViewName("access-table");
    return modelAndView;        
}

Обновление 2

Следовал аналогичному подходу для заголовков столбцов. У меня есть другой объект List в классе оболочки. Он работает при начальной загрузке, но заголовки отсутствуют после возврата из контроллера POST.

  <thead>
    <tr>              
      <th scope="col">User Name</th>
      <th scope="col">Login</th>
      <th scope="col">Email</th>
      <th:block th:each="key, iter : ${form.customColumns}">
        <th th:text="${key}" scope="col"></th>
        <input type="hidden" th:field="${form.customColumns[__${iter.index}__]}" />
      </th:block> 
      <th scope="col">Action</th>
    </tr>
  </thead>

Окончательное обновление:

Видимо th: поле ввода тега не будет связываться в разделе ad (не должно быть полей ввода LoL). Все работает, как и ожидалось, после того, как я переместил его до запуска таблицы.

Answer 1

Вам необходимо поместить вашу таблицу в форму, которая будет определять, что будет отправлено контроллеру в поле th: object.Весной это называется командным объектом.Предположим для этого примера, что список «eachRowList» находится внутри объекта команды с именем «form».

<form method="post"
        th:action="@{/mappingInYourController}"
        th:object="${form}">
<!-- Here goes your table -->
</form>

Вы также должны указать, какие данные будут помещены в объект, который вы определили в th: object,поэтому его можно отправить контроллеру.Это делается с помощью полей ввода th: следующим образом (пример с одной из ваших строк):

<tr th:each="eachRow, iter : ${form.eachRowList}">
<!-- ... -->
<td> <input th:value="${eachRow.column1}" th:field="*{eachRowList[__${iter.index}__].column1}"/>
</td>

Обратите внимание, что когда вы обращаетесь к атрибутам с помощью * {}, вы ссылаетесь на атрибуты внутри того, что выопределенный как th: объект для формы.

Теперь, если вы отправите форму, например, с помощью кнопки, ваш контроллер сможет получить объект команды "form" со списком eachRowList внутри него, иэлементы списка будут такими же, как на входах таблицы.Если вы не хотите, чтобы эти входные данные были редактируемыми встроенными в таблицу, вы можете сделать это с помощью:

th:readonly="true"

Answer 2

Для вашей кнопки отправки вам нужна форма, которая окружает ваш стол.Решение, которое может работать, состоит в том, чтобы иметь скрытые поля ввода, которые содержат данные для каждого td .

<input type="hidden" th:field="${eachRow.column1}"/>

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