【问题标题】:Create dynamic List Object in thymeleaf by Adding rows to Table通过向表中添加行在 thymeleaf 中创建动态列表对象
【发布时间】:2018-07-30 08:22:54
【问题描述】:

这是我的带有控制器的代码示例。

控制器类

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";
    }

}

Documents 类是我的模型属性

import java.util.List;

public class Documents {

    private int id;
    private List<Document> document;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public List<Document> getDocument() {
        return document;
    }
    public void setDocument(List<Document> document) {
        this.document = document;
    }
}

&文档类

public class Document {

    private String name;
    private String printout;
    private String orignal;
    private String photocopy;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPrintout() {
        return printout;
    }
    public void setPrintout(String printout) {
        this.printout = printout;
    }
    public String getOrignal() {
        return orignal;
    }
    public void setOrignal(String orignal) {
        this.orignal = orignal;
    }
    public String getPhotocopy() {
        return photocopy;
    }
    public void setPhotocopy(String photocopy) {
        this.photocopy = photocopy;
    }
}

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>

在单击添加行按钮时,我想添加一个与我的 JQuery 一起使用的新行,但是 我想要在发布时绑定动态对象列表 页面和服务器会响应 将创建“文档”类的新对象。并且它包含的字段 Document 将包含带有名称、原始复印件和打印数据的文档列表。在文档列表对象中添加索引是增量。最后点击保存按钮,页面会将文档对象列表绑定到文档,然后将文档发送到对象到控制器,我可以解包

【问题讨论】:

    标签: spring spring-mvc spring-boot spring-data thymeleaf


    【解决方案1】:

    首先我还需要类似的东西来动态绑定列表对象,其中列表的大小可以在客户端增加(用户可以触发事件来添加新行/删除行)。

    我使用 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);
    });
    });
    

    对于删除行按钮,您需要在每一行上添加删除行按钮,然后在该按钮上按下更改计数器的值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-10-28
      • 2017-08-26
      • 1970-01-01
      • 1970-01-01
      • 2018-09-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多