动态HTML 表单名称生成
Dynamic HTML form name generation
我有以下 HTML 文件。它使用 Thymeleaf:
<form action="#" th:action="@{/heart2heart/token/__${tokenId}__/}" method="post">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th style="display:none;"></th>
<th th:text="#{service.desc}">Service</th>
<th th:text="#{feedback.description}">Feedback</th>
<th th:text="#{visit.date}">Date of Visit</th>
<th th:text="#{repr.name}">FU Repr</th>
<th th:text="#{resolution.response}">Response</th>
<th th:text="#{resolution.satisfactionLevel}">Satisfaction</th>
<th th:text="#{resolution.comment}">Comment</th>
</tr>
<tr th:each="feedback : ${feedbacks}">
<td style="display:none;"><input type="hidden" name="feedbackIds" th:value="${feedback.id}" /></td>
<td th:text="${feedback.service.description}">Steel</td>
<td th:text="${feedback.description}">Problem</td>
<td th:text="${feedback.visits[0].date}">12/08/2015</td>
<td th:text="${feedback.visits[0].repr.fullName}">XYZ</td>
<td th:text="${feedback.receipt.resolutions[0].response}">response</td>
<td>
<div class="radio">
<label><input type="radio" name="satisfaction" th:text="#{global.yes}" value="SATISFIED">Yes</input></label>
</div>
<div class="radio">
<label><input type="radio" name="satisfaction" th:text="#{global.no}" value="NOT SATISFIED">No</input></label>
</div>
</td>
<td><textarea class="form-control" rows="2" id="comment" name="comment"></textarea></td>
</tr>
</table>
<div class="form-group">
<button type="submit" name="addRow" th:text="#{button.submit}"
class="btn btn-primary btn-md">Submit</button>
</div>
</div>
</form>
我的表格是:
public class ReceiptForm {
private HashMap<Integer, String> comments;
private int[] feedbackIds;
private HashMap<Integer, String> satisfactions;
public HashMap<Integer, String> getComments() {
return comments;
}
public int[] getFeedbackIds() {
return feedbackIds;
}
public HashMap<Integer, String> getSatisfactions() {
return satisfactions;
}
public void setComments(HashMap<Integer, String> comments) {
this.comments = comments;
}
public void setFeedbackIds(int[] feedbackIds) {
this.feedbackIds = feedbackIds;
}
public void setSatisfactions(HashMap<Integer, String> satisfactions) {
this.satisfactions = satisfactions;
}
}
在当前代码中,所有迭代的输入都相同。
要求是表单输入 satisfaction
和 comment
将与每个 feedback
分开。 feedbacks
的长度每次都不同,所以我不能给它们静态名称。我该怎么做呢?另外,我应该如何以 Java 形式捕获这些数据?
请看一下 7.6 Dynamic fields in the Thymeleaf + Spring tutorial 部分。基本上你必须跟踪迭代状态。
我不知道您的程序做什么,但您应该创建一个包含反馈列表的表单支持 bean。这是一个简单的例子,演示了
动态字段的使用:
为您的反馈创建一个 class:
public class Feedback {
private Satisfaction satisfaction;
private String comment;
public Satisfaction getSatisfaction() {
return satisfaction;
}
public void setSatisfaction(Satisfaction satisfaction) {
this.satisfaction = satisfaction;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
@Override
public String toString() {
return "Feedback[satisfaction=" + satisfaction.name() + ", comment=" + comment + "]";
}
public static enum Satisfaction {
SATISFIED, NOT_SATISFIED
}
}
创建一个 class 来保存反馈列表:
public class Receipt {
private List<Feedback> feedbacks = new ArrayList<>();
public List<Feedback> getFeedbacks() {
return feedbacks;
}
public void setFeedbacks(List<Feedback> feedbacks) {
this.feedbacks = feedbacks;
}
@Override
public String toString() {
return "Receipt[feedbacks=" + feedbacks + "]";
}
}
创建一个控制器,将表单支持 bean 放入模型中:
@Controller
public class MyController {
@RequestMapping("/")
public String showForm(final Model model) {
final Receipt receipt = new Receipt();
final Random rand = new Random();
final int feedbackCount = rand.nextInt(20) + 1;
for (int i = 0; i < feedbackCount; i++) {
final Feedback feedback = new Feedback();
feedback.setSatisfaction(rand.nextBoolean() ? SATISFIED : NOT_SATISFIED);
feedback.setComment("Some comment.");
receipt.getFeedbacks().add(feedback);
}
model.addAttribute("receipt", receipt);
return "form";
}
@RequestMapping(value = "/", method = RequestMethod.POST)
public String printSubmittedData(final @ModelAttribute Receipt receipt) {
System.out.println(receipt);
return "redirect:/";
}
}
创建显示表单的模板:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<form action="#" th:action="@{/}" th:object="${receipt}" method="post">
<table>
<tr th:each="feedback, feedbackStat : *{feedbacks}">
<td>
<div class="radio">
<label>
<input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" value="SATISFIED" />
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" value="NOT_SATISFIED" />
No
</label>
</div>
</td>
<td>
<textarea rows="2" th:field="*{feedbacks[__${feedbackStat.index}__].comment}"></textarea>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
</body>
</html>
控制器创建随机数量的反馈来演示字段的动态渲染。
我有以下 HTML 文件。它使用 Thymeleaf:
<form action="#" th:action="@{/heart2heart/token/__${tokenId}__/}" method="post">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th style="display:none;"></th>
<th th:text="#{service.desc}">Service</th>
<th th:text="#{feedback.description}">Feedback</th>
<th th:text="#{visit.date}">Date of Visit</th>
<th th:text="#{repr.name}">FU Repr</th>
<th th:text="#{resolution.response}">Response</th>
<th th:text="#{resolution.satisfactionLevel}">Satisfaction</th>
<th th:text="#{resolution.comment}">Comment</th>
</tr>
<tr th:each="feedback : ${feedbacks}">
<td style="display:none;"><input type="hidden" name="feedbackIds" th:value="${feedback.id}" /></td>
<td th:text="${feedback.service.description}">Steel</td>
<td th:text="${feedback.description}">Problem</td>
<td th:text="${feedback.visits[0].date}">12/08/2015</td>
<td th:text="${feedback.visits[0].repr.fullName}">XYZ</td>
<td th:text="${feedback.receipt.resolutions[0].response}">response</td>
<td>
<div class="radio">
<label><input type="radio" name="satisfaction" th:text="#{global.yes}" value="SATISFIED">Yes</input></label>
</div>
<div class="radio">
<label><input type="radio" name="satisfaction" th:text="#{global.no}" value="NOT SATISFIED">No</input></label>
</div>
</td>
<td><textarea class="form-control" rows="2" id="comment" name="comment"></textarea></td>
</tr>
</table>
<div class="form-group">
<button type="submit" name="addRow" th:text="#{button.submit}"
class="btn btn-primary btn-md">Submit</button>
</div>
</div>
</form>
我的表格是:
public class ReceiptForm {
private HashMap<Integer, String> comments;
private int[] feedbackIds;
private HashMap<Integer, String> satisfactions;
public HashMap<Integer, String> getComments() {
return comments;
}
public int[] getFeedbackIds() {
return feedbackIds;
}
public HashMap<Integer, String> getSatisfactions() {
return satisfactions;
}
public void setComments(HashMap<Integer, String> comments) {
this.comments = comments;
}
public void setFeedbackIds(int[] feedbackIds) {
this.feedbackIds = feedbackIds;
}
public void setSatisfactions(HashMap<Integer, String> satisfactions) {
this.satisfactions = satisfactions;
}
}
在当前代码中,所有迭代的输入都相同。
要求是表单输入 satisfaction
和 comment
将与每个 feedback
分开。 feedbacks
的长度每次都不同,所以我不能给它们静态名称。我该怎么做呢?另外,我应该如何以 Java 形式捕获这些数据?
请看一下 7.6 Dynamic fields in the Thymeleaf + Spring tutorial 部分。基本上你必须跟踪迭代状态。 我不知道您的程序做什么,但您应该创建一个包含反馈列表的表单支持 bean。这是一个简单的例子,演示了 动态字段的使用:
为您的反馈创建一个 class:
public class Feedback {
private Satisfaction satisfaction;
private String comment;
public Satisfaction getSatisfaction() {
return satisfaction;
}
public void setSatisfaction(Satisfaction satisfaction) {
this.satisfaction = satisfaction;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
@Override
public String toString() {
return "Feedback[satisfaction=" + satisfaction.name() + ", comment=" + comment + "]";
}
public static enum Satisfaction {
SATISFIED, NOT_SATISFIED
}
}
创建一个 class 来保存反馈列表:
public class Receipt {
private List<Feedback> feedbacks = new ArrayList<>();
public List<Feedback> getFeedbacks() {
return feedbacks;
}
public void setFeedbacks(List<Feedback> feedbacks) {
this.feedbacks = feedbacks;
}
@Override
public String toString() {
return "Receipt[feedbacks=" + feedbacks + "]";
}
}
创建一个控制器,将表单支持 bean 放入模型中:
@Controller
public class MyController {
@RequestMapping("/")
public String showForm(final Model model) {
final Receipt receipt = new Receipt();
final Random rand = new Random();
final int feedbackCount = rand.nextInt(20) + 1;
for (int i = 0; i < feedbackCount; i++) {
final Feedback feedback = new Feedback();
feedback.setSatisfaction(rand.nextBoolean() ? SATISFIED : NOT_SATISFIED);
feedback.setComment("Some comment.");
receipt.getFeedbacks().add(feedback);
}
model.addAttribute("receipt", receipt);
return "form";
}
@RequestMapping(value = "/", method = RequestMethod.POST)
public String printSubmittedData(final @ModelAttribute Receipt receipt) {
System.out.println(receipt);
return "redirect:/";
}
}
创建显示表单的模板:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<form action="#" th:action="@{/}" th:object="${receipt}" method="post">
<table>
<tr th:each="feedback, feedbackStat : *{feedbacks}">
<td>
<div class="radio">
<label>
<input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" value="SATISFIED" />
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" value="NOT_SATISFIED" />
No
</label>
</div>
</td>
<td>
<textarea rows="2" th:field="*{feedbacks[__${feedbackStat.index}__].comment}"></textarea>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
</body>
</html>
控制器创建随机数量的反馈来演示字段的动态渲染。