动态 HTML 表单名称生成

Question

我有以下 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 形式捕获这些数据？

Answer 1

请查看7.6 Dynamic fields in the Thymeleaf + Spring tutorial 部分。基本上你必须跟踪迭代状态。 我不知道您的程序做了什么，但您应该创建一个包含反馈列表的表单支持 bean。下面是一个简单的例子，演示了 使用动态字段：

为您的反馈创建一个课程：

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

    }

}

创建一个包含反馈列表的类：

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>

控制器创建随机数量的反馈来演示字段的动态呈现。