列表输入中的 Thymeleaf 列表

Question

我有这样的数据结构：-

WorkHistory{
    List<Jobs> jobs;
}
Jobs{
   List<String> workDoneSentences;
}

基本上，我试图收集一个人过去工作过的所有工作以及他在那里完成的工作。所以它是一个列表结构的列表。我想知道我们如何在 Thymeleaf/Spring mvc 的 UI 中处理这个问题。

我正在尝试创建如图所示的 UI。有一个表格可以输入数据。要输入 workDoneSentence 我想打开另一个模式。并且句子列表应该绑定正确的作业索引。

工作完成打开模式以输入工作完成句子列表。

我为此拥有的 html 代码如下：-

                                            <tbody>
                                            <tr id='addr_work0' th:each="workRow, rowStat : *{workHistoryDetails.allWorkHistoryData}">
                                                <td th:text="${rowStat.index + 1}"></td>
                                                <td><input type="text" name='work_name0'
                                                    placeholder='Company Name'  class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].companyName}"/></td>
                                                <td><input type="text" name='work_city0'
                                                    placeholder='Company city' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].city}"/></td>
                                                <td><input type="text" name='work_title0'
                                                    placeholder='Job Title' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].jobTitle}"/></td>
                                                <td><input name="is_current0" type="checkbox"
                                                    value="" class="form-control" style="text-align: center;" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].currentJob}">
                                                </td>
                                                <td><input type="text" name='work_start0'
                                                    placeholder='Start Date' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].startDate}"/></td>
                                                <td><input type="text" name='work_end0'
                                                    placeholder='End Date' class="form-control" th:field="*{workHistoryDetails.allWorkHistoryData[__${rowStat.index}__].endDate}"/></td>
                                                <td><a class="btn btn-primary btn-md" id="work_done0"
                                                    name="work_done0">Work done</a></td>


                                            </tr>
                                            <tr id='addr_work1'></tr>
                                        </tbody>

我不确定如何链接 workDone 输入。请建议。 谢谢！

Answer 1

我已经尝试如下，它可以正常工作。

模板：为每个作业创建独特的“模态”。 (work-list.html)

<form method="post" action="#" th:action="@{/work-list}" th:object="${workHistoryDetails}">
 <table>
  <thead>
   <tr>
    <th>
      <button type="submit" name="addRow" th:text="'Add Row'">Add row</button>
    </th>
   </tr>
  </thead>
  <tbody>
   <tr id='addr_work0' th:each="workRow, rowStat : *{jobs}">
    <td th:text="${rowStat.index + 1}"></td>
      <td><input type="text" 
                placeholder='Company Name'  class="form-control" th:field="*{jobs[__${rowStat.index}__].companyName}"/></td>
      <td><input type="text" 
                placeholder='Company city' class="form-control" th:field="*{jobs[__${rowStat.index}__].city}"/></td>


      <td><button type="button" class="btn btn-primary" data-toggle="modal" th:attr="data-target='#myModal'+${rowStat.index}" >Open modal</button></td>

      <!-- The Modal -->
      <div class="modal fade" th:id="'myModal'+${rowStat.index}">
       <div class="modal-dialog">
        <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
           <h4 class="modal-title">Modal Heading</h4>
           <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
           <input type="text"
                placeholder='Company Name'  class="form-control" th:field="*{jobs[__${rowStat.index}__].workDoneSentences[0]}"/>
           <input type="text" 
                placeholder='Company city' class="form-control" th:field="*{jobs[__${rowStat.index}__].workDoneSentences[1]}"/>
         </div>

         <!-- Modal footer -->
         <div class="modal-footer">
           <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>

        </div>
       </div>
      </div>
    </tr>
   </tbody>
  </table>
 <input type="submit" name="submit" value="Add" class="btn btn-danger" />
</form> 

控制器：

@ModelAttribute("workHistoryDetails")
public WorkHistory populateWorkHistories() {
    return this.workHistory.getAllHistoryDetail();
}

@Autowired
WorkHistoryService workHistory;

@GetMapping("/work-list")
public String greeting(final WorkHistory workHistoryDetails) {
    return "work-list";
}

@RequestMapping(value="/work-list",method=RequestMethod.POST)
public String create(final WorkHistory workHistoryDetails) {

   this.workHistory.setJobs(workHistoryDetails);
   return "work-list";
}

// for adding new row job to jobs list
@RequestMapping(value="/work-list", params={"addRow"})
public String addRow(final WorkHistory workHistoryDetails, Model model) {

    Jobs jobRow = new Jobs("","",new ArrayList<>());
    workHistoryDetails.getJobs().add(jobRow);
    model.addAttribute("workHistoryDetails", workHistoryDetails);
    return "work-list";
}

服务：只是为了测试：

@Service
public class WorkHistoryService {

    static WorkHistory workHistoryDetails =new WorkHistory();
    static{
        List<String> workDones = new ArrayList<>();
        workDones.add("angular");
        workDones.add("description");
        List<String> workDones1 = new ArrayList<>();
        workDones1.add("java,c++");
        workDones1.add("description also");

        Jobs job1 = new Jobs("Twitter", "USA",workDones); 
        Jobs job2 = new Jobs("Microsoft", "USA",workDones1);
        List<Jobs> jobList = new ArrayList<>();
        jobList.add(job1);
        jobList.add(job2);
        workHistoryDetails.setJobs(jobList);
    }

    public WorkHistory getAllHistoryDetail(){

        return workHistoryDetails;
    }

    public void setJobs(WorkHistory workHistory){
        workHistoryDetails.getJobs().clear();
        List<Jobs> jobs = workHistory.getJobs();
        for (Jobs job : jobs) {
            workHistoryDetails.getJobs().add(job);
        }
    }
}

工作领域：

public class Jobs {
   private String companyName;
   private String city;
   private List<String> workDoneSentences;
    //default constructor important!   
    public Jobs() {
    super();
    }
   //setter getter
}

希望对你有帮助。

Answer 2

<td><a class="btn btn-primary btn-md" id="work_done0" name="work_done0"  th:href="Modal">Work done</a></td>

Modal部分应该根据自己的需求配置