Spring 通过向表中添加行，在thymeleaf中创建动态列表对象_Spring_Spring Mvc_Spring Boot_Spring Data_Thymeleaf

Spring 通过向表中添加行，在thymeleaf中创建动态列表对象

spring spring-mvc spring-boot

Spring 通过向表中添加行，在thymeleaf中创建动态列表对象,spring,spring-mvc,spring-boot,spring-data,thymeleaf,Spring,Spring Mvc,Spring Boot,Spring Data,Thymeleaf,这是我的控制器代码示例控制器类 import java.util.ArrayList; import org.CodeDaemons.dao.Document; import org.CodeDaemons.dao.Documents; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annota

这是我的控制器代码示例

控制器类

import java.util.ArrayList;

import org.CodeDaemons.dao.Document;
import org.CodeDaemons.dao.Documents;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class Control {

    @GetMapping("/")
    public String getPage(Model model) {
        Documents  docs = new Documents();
        docs.setDocument(new ArrayList<Document>());
        docs.setId(12);
        model.addAttribute("documents",new Documents());
        return "document";
    }

    @PostMapping("/save")
    public String save(@ModelAttribute("documents") Documents docs) {
        if(docs.equals(null))
        {
            System.out.println("Bye");
        }
        else {
            System.out.println("Error");
            System.out.println(docs.getId());
            System.out.println(docs.getDocument().size());
        }
        return "save";
    }

}

Html模板

<HTML  xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE> Document Submission </TITLE>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

$(document).ready(function(){

var counter = 1;
    $("#addnew").click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><select name="doc.name"><option  value="10" name="10">10th Mark-sheet</option><option value="" name="12">12th Mark-sheet</option>'+
'<option value="MSA" name="MSA">UG Mark-sheet(All Semesters)</option>'+
'<option value="UGM" name="UGM">UG Consolidated Mark-sheet</option>'+
'<option value="UGD" name="UGD">UG Degree/Provisional Degree</option>'+
'<option value="MC" name="MC">Migration Certificate</option>'+
'<option value="TC" name="TC">Transfer Certificate</option>'+
'</select></td>'+
'<td><select name="doc.original"><option value="yes">Yes</option><option value="due">Due</option><option value="NA">N/A</option></select></td><td>'+
'<select name="doc.photocopy"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td>'+
'<select name="doc.printout"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td><input type="date"></td><td><input type="date"></td></tr>');
    jQuery('table.table-hover').append(newRow);
});
});


</script>

</HEAD>
<BODY>

    <center><h1>Document Submission Record</h1></center>
    <br/>



    <!-- College Id No.</td><td> <input type="text" class="form-group">&nbsp;
    Ref. Id</td><td> <input type="text" class="form-group">&nbsp;
    Name</td> <input type="text" class="form-group">
    <br/><br/>
     -->

    <form th:action="@{/save}" method="post" th:object="${documents}">

    <center><h3><strong>Documents</strong></h3></center><br/>



    <TABLE class="table table-hover" >

        <tr>
            <th >Document Name</th>
            <th colspan="3">Document Type</th>
            <th>Received Date</th>
            <th>Due Date</th>
        </tr>

        <tr>
                <td></td>
                <td>Original</td>
                <td>Photocopy</td>
                <td>Printout</td>
                <td></td>
                <td></td>
        </tr>



        <tr th:each="doc :${documents.document}" th:field="*{document}">

                <td>
                <select name="doc.name">
                    <option value="10">10th Mark-sheet</option>
                    <option value="12">12th Mark-sheet</option>
                    <option value="MSA">UG Mark-sheet (All Semesters)</option>
                    <option value="UGM">UG Consolidated Mark-sheet</option>
                    <option value="UGD">UG Degree/Provisional Degree</option>
                    <option value="MC">Migration Certificate</option>
                    <option value="TC">Transfer Certificate</option>
                    </select>
                </td>
                <td>

                <select name="doc.original" th:field="*{document.orignal}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>
                <td>


                <select name="doc.photocopy" th:field="*{document.photocopy}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>

                <td>


                <select name="doc.printout"  th:field="*{document.printout}">
                    <option value="yes">Yes</option>
                    <option value="due">Due</option>
                    <option value="NA">N/A</option>
                </select>
                </td>
                <td>
                <input type="date">
                </td>
                <td>
                <input type="date">
                </td>
            </tr>
    </TABLE>

<button type="button" class="btn btn-primary" id="addnew">Add Row</button><br/><br/>
<br/>
        <button type="submit" class="btn btn-primary">Save</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</form>
</BODY>
</HTML>


文件提交
$（文档）.ready（函数（）{
var计数器=1；
$（“#添加新”）。单击（函数（事件）{
event.preventDefault（）；
计数器++；
var newRow=jQuery（'10号标记-第12号标记表'+
“UG评分表（所有学期）”+
“UG合并标记表”+
“UG学位/临时学位”+
“迁移证书”+
“转让证书”+
''+
“YesDueN/A”+
“YesDueN/A”+
‘YesDueN/A’；
jQuery（'table.table hover'）.append（newRow）；
});
});
文件提交记录


文档

文件名
文件类型
收到日期
到期日
起初的
影印
打印输出
第十标记表
第12号标记表
UG评分表（所有学期）
UG综合评分表
大学学位/临时学位
迁移证书
转让证书
对
应得的
不适用
对
应得的
不适用
对
应得的
不适用
添加行




拯救

单击AddRow按钮，我想添加一个新行，它正在使用我的JQuery，但是我想在发布时绑定动态对象列表页面和服务器的响应如下所示（&S）

将创建“Documents”类的新对象。并且它包含文档的字段将包含带有名称、原始复印件和打印输出数据的文档列表。它在文档列表对象中添加索引为增量的对象。最后单击保存按钮，页面将把文档对象列表绑定到文档，然后将文档发送到对象控制器，我可以打开该控制器。首先，我还需要类似的东西来动态绑定列表对象，其中列表的大小可以在客户端增加（用户可以触发事件以添加新行/删除行）

我使用Thymeleaf和jquery来实现这一点

您需要在thymeleaf中用th:name替换th:field

th:name="|documents.document[0].printout|"

这将创建索引值增加的新对象。您不需要迭代列表，因为您将在用户添加新行之后添加对象

在jquery中，您要在按钮上添加新div，请单击从th:name中删除th，因为该代码将直接附加到客户端，而thymeleaf将在服务器端渲染。所以在客户端th:name将不起作用

 var counter = 1;
    $("#addnew").click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><select name='+ documents.document[counter].name +'><option  value="10" name="10">10th Mark-sheet</option><option value="" name="12">12th Mark-sheet</option>''<option value="MSA" name="MSA">UG Mark-sheet(All Semesters)</option> <option value="UGM" name="UGM">UG Consolidated Mark-sheet</option> <option value="UGD" name="UGD">UG Degree/Provisional Degree</option> <option value="MC" name="MC">Migration Certificate</option> <option value="TC" name="TC">Transfer Certificate</option>'+
'</select></td>'+
'<td><select name='+documents.document[counter].original +'><option value="yes">Yes</option><option value="due">Due</option><option value="NA">N/A</option></select></td><td>'+
'<select name='+documents.document[counter].photocopy+'><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td>'+
'<select name="doc.printout"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td><input type="date"></td><td><input type="date"></td></tr>');
    jQuery('table.table-hover').append(newRow);
});
});

var计数器=1；
$（“#添加新”）。单击（函数（事件）{
event.preventDefault（）；
计数器++；
var newRow=jQuery（“第10次成绩表第12次成绩表”UG成绩表（所有学期）UG综合成绩表UG学位/临时学位迁移证书转让证书”+
''+
“YesDueN/A”+
“YesDueN/A”+
‘YesDueN/A’；
jQuery（'table.table hover'）.append（newRow）；
});
});

对于“删除行”按钮，您需要在每一行上添加“删除行”按钮，并在该按钮上按更改计数器的值。

谢谢！对我来说很有魅力。向上投票

th:name="|documents.document[0].printout|"

 var counter = 1;
    $("#addnew").click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><select name='+ documents.document[counter].name +'><option  value="10" name="10">10th Mark-sheet</option><option value="" name="12">12th Mark-sheet</option>''<option value="MSA" name="MSA">UG Mark-sheet(All Semesters)</option> <option value="UGM" name="UGM">UG Consolidated Mark-sheet</option> <option value="UGD" name="UGD">UG Degree/Provisional Degree</option> <option value="MC" name="MC">Migration Certificate</option> <option value="TC" name="TC">Transfer Certificate</option>'+
'</select></td>'+
'<td><select name='+documents.document[counter].original +'><option value="yes">Yes</option><option value="due">Due</option><option value="NA">N/A</option></select></td><td>'+
'<select name='+documents.document[counter].photocopy+'><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td>'+
'<select name="doc.printout"><option value="yes">Yes</option><option value="due">Due</option><option value="na">N/A</option></select></td><td><input type="date"></td><td><input type="date"></td></tr>');
    jQuery('table.table-hover').append(newRow);
});
});