我有这样的数据结构:-
WorkHistory{
List<Jobs> jobs;
}
Jobs{
List<String> workDoneSentences;
}
基本上,我试图收集一个人过去工作过的所有工作以及他在那里做过的工作。所以它是一个列表结构的列表。我想知道我们如何在 Thymeleaf/Spring mvc 的 UI 中处理这个问题。
我正在尝试创建如图所示的 UI。有一个表格可以输入数据。要输入 workDoneSentence 我想打开另一个模式。并且句子列表应该绑定(bind)正确的作业索引。
工作完成打开模式以输入工作完成句子列表。
我为此拥有的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 输入。请建议。
谢谢!
最佳答案
我已经尝试如下,它工作正常。
模板:为每个工作创建独特的“模态”。 (工作列表.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>
Controller :
@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
}
我希望它对你有帮助。
关于jsp - 列表输入中的 Thymeleaf 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48499723/