列表输入中的胸腺列表 [英] Thymeleaf list within list input
本文介绍了列表输入中的胸腺列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个像这样的数据结构:-
I have a data structure like this :-
WorkHistory{
List<Jobs> jobs;
}
Jobs{
List<String> workDoneSentences;
}
基本上，我正在尝试收集一个人过去从事过的所有工作以及他在那里所做的工作.因此，它是列表结构的列表.我想知道如何在Thymeleaf/Spring mvc的UI中处理此问题.
Basically, I am trying to collect all past jobs where a person has worked and the work that he hsa done there. So it is a list of list structure. I would like to know how can we handle this in UI for Thymeleaf/Spring mvc.
我正在尝试创建图像中所示的UI.有一个用于输入数据的表.要输入workDoneSentence，我想打开另一个模式.并且句子列表应绑定到正确的工作索引.
I am trying to create UI as shown in the images. There is a table to enter data. To enter workDoneSentence i would like to open another modal. And the list of sentences should be bound to correct job index.
完成工作"打开模式以输入已完成工作的句子列表.
Work Done opens the modal to take input the list of work done sentences.
为此，我拥有的html代码如下:-
The html code that I have for this as follows :-
<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输入.请提出建议. 谢谢！
I am not sure how I can link the workDone input. Please suggest. Thanks!
推荐答案
我尝试了以下操作，并且可以正常工作.
I've tried as follows and it works properly.
模板:为每个作业创建唯一的模式". (work-list.html)
Template: Create unique "modal" for each job. (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">×</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
}
希望对您有帮助.
这篇关于列表输入中的胸腺列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
