这是我的第一次所以如果我没有正确地说出来,请忽略。我的目标是创建一个网页,用户可以在其中添加/删除表格中的多个文本区域,一旦提交页面,整个页面就应插入到数据库中。
数据对象:
DigestSection.java
public class DigestSection implements Transferable {
private Long digestSectionId;
private String body;
private String title;
}
DigestTemplate.java
public class DigestTemplate implements Transferable {
private String description;
private String title;
private List<DigestSection> section;
}
所以DigestTemplate
可能有List
DigestSection
个,在我的情况下是:
在摘要中,如果用户点击按钮添加新部分,实际上会创建此标题和内容编辑器,我已创建了一个表单,在该表单中创建表格以将所有部分保存为如下所示的行< / p>
<form:form id="digestForm" modelAttribute ="digesttemplate" enctype="multipart/form-data">
<table class="table" id="contentTable" >
<tbody>
<c:forEach items="${digesttemplate.section}" varStatus="sectionContent" var="sectionVR">
<tr>
<td class="control-label">
<form:input path="section[${sectionContent.index}].title" />
</td>
<td>
<form:textarea id="html-body${sectionVR.digestSectionId}" size='25' class="form-control" path="section[${sectionContent.index}].body" rows="25" />
<form:errors path="section[${sectionContent.index}].body" cssClass="error" />
</td>
<form:hidden path="section[${sectionContent.index}] .digestSectionId" id="digestSectionId" />
<td colspan="2">
<input type="checkbox" name="record">
</td>
</tr>
很明显,我使用的是Spring MVC表单元素,因此这些元素都绑定到我们导航到此视图时在控制器中创建的模型属性digesttemplate
控制器代码
@RequestMapping(value={"/add"}, method={RequestMethod.GET})
public String add( Model model) {
model.addAttribute("action", "save");
model.addAttribute("digesttemplate", new DigestTemplate());
return "digest-form";
}
如果我们已经在数据库中有部分,那么它可以正常工作并且所有部分都可以正常呈现,当我在更新现有部分后提交页面时,它会反映在我的模型属性中以保存控制器以及
@RequestMapping(value={"/save"}, method={RequestMethod.POST})
public String save(@Valid @ModelAttribute("digesttemplate") DigestTemplate digest, BindingResult result, Model model) {
model.addAttribute("action", "save");
if (result.hasErrors()) {
return "digest-form";
}
DigestTemplate response = null;
try
{
response = service.save(digest);
}
}
然而,当我在现有摘要中使用jQuery创建一个新的部分时,它并没有在上述控制器的模型属性中被选中。
用于添加元素的jQuery代码
$("#add-row").click(function(){
var id = $('#digestSectionId').val();
id++;
var markup = "<tr>";
markup += " <td class='control-label'>";
markup += " <input placeholder='Section Title'/>";
markup += " </td>";
markup += " <td>";
markup += " <textarea id='html-body" + id + "' class='form-control' rows='25'/> <form:errors cssClass='error' />";
markup += " </td>";
markup += " <td colspan='2'><input type='checkbox' name='record'></td>";
markup += "</tr>";
$("#digestSectionId").val(id);
$("table tbody").append(markup);
$( document ).trigger( "page.ready" );
});
我已尝试过几种方法,比如克隆jQuery中的元素,但没有运气。我将非常感谢实现此目的的代码示例。