JSP / Spring MVC-如何使用添加到模型中的元素动态填充列表javascript / jQuery

编程问答 2022-08-15

问题描述

首先，我很抱歉，如果这个问题不够清楚。如果方便的话，我将对其进行编辑，以查看将来是否对其他人有帮助。

我在JSP中有一个绑定到Spring MVC模型的表单，该表单将检索用户输入的信息。 问题是，在以下示例中，我将允许多个提交/条目作为列表（电影）传递。每次用户单击“添加”时，这些字段都会被克隆以允许一个新条目（并且以前的字段被隐藏/删除）。最后，当单击Submit（提交）时，表单将发布到控制器以持久保存数据。

一切正常。我要实现的是创建一个列表，该列表动态显示用户每次单击“添加”时要添加的所有条目。

这就是我要使用的列表（这里为了简单起见，只有一个字段）

<form:form id="myForm" method="post" modelattribute="cinema" action="submitMovies">
    <!-- List to be filled dynamically with elements from my model (Now empty) ->
     <div id="files" class="list-section collapse in">
        <div class="item-list-container" id="groupedList">
            <div class="labels">
                <div class="item">Title</div>
            </div>
            <div class="grey-background">
                <c:forEach items="movies" var="movie" varStatus="loop" >
                    <div class="itemContainer">
                        <div class="subGroup ">
                            <div class="item " id="">Want to display names entered in form here i.e fourth row would show content of movies[3].movieName</div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
     </div>

（不是我的问题真正需要的，但可以想象我的模型是带有List电影的Cinema类； 而且Movie.class将具有String movieName属性。）

我有该forEach，但是单击“添加”后，列表未添加行。因此很明显，这并没有刷新其内容。

使用一个字段和“添加”按钮添加下面的其余表单。 添加按钮仅克隆克隆项div中的内容，并更改字段的ID。例如： <form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName"最初是id =“ movieName0”绑定到movies [0] .movi​​eName，添加后，创建了一个新元素，并将movieName1绑定到movie [1] .movi​​eName

同样，它工作正常。我唯一要寻找的是一种方式，当我单击“添加”并创建元素（movieName1绑定到电影[1] .movi​​eName）时，动态地在该列表/表中显示一个新行，其中包含具有以前格式的信息（movieName0绑定到movie [0] .movi​​eName）

    <!-- List to be filled dynamically with elements from my model (Now empty) ->
     <div id="files" class="list-section collapse in">
        <div class="item-list-container" id="groupedList">
            <div class="labels">
                <div class="item">Title</div>
            </div>
            <div class="grey-background">
                <c:forEach items="movies" var="movie" varStatus="loop" >
                    <div class="itemContainer">
                        <div class="subGroup ">
                            <div class="item " id="">Want to display names entered in form here</div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
     </div>

     <!-- Start Clone Item -->
     <div class="cloneList" data-count="${movies.size() + 0}">
     <c:forEach items="movies" var="movie" varStatus="loop" begin="0" >
     <!-- Cloned item -->
        <div class="cloneItem" id="innerItem${loop.index}">
            <div id="movieNameField${loop.index}" class="form-group">
                 <label for="movieName${loop.index}">NAME</label>
                 <div class="status-container">
                    <form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName" maxlength="35" class="form-control"/>
                 </div>
                 <form:errors path="movies[${loop.index}].movieName" cssClass="errorShow" element="div"/>
            </div>
        </div>
     </c:forEach>
     </div>
     <!-- End Clone -->

     <div class="row">
        <div class="col">
            <a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()"><spring:message code="button.add" /></a><br>
        </div>
     </div>

     <!-- More code to submit form etc -->
</form:form>```


**EDIT:** addMovie() content added as requested.


function addMovie() {

var target = $('.cloneList');

//Keep track of number of movies
var listCount = $('.cloneList').attr("data-count");

var innerItem = $('div[id^="innerItem"]:last');

var num = parseInt(innerItem.prop("id").match(/\d+/g),10) + 1;
$('.cloneList').attr("data-count",num);

var clone = innerItem.clone().prop('id','innerItem' + num).find("input:text").val("").end();

clone.find('#movieName' + listCount).attr("name","movies[" + num + "].movieName").attr("id","movieNameField" + num).text("");
clone.find('#movieNameField' + listCount).attr("id","movieNameField" + num).text("");

target.append（clone）;

解决方法

您可以循环输入的values，然后将这些值添加到需要显示名称的div中。在下面的代码中，我使用了<ul></ul>标签来显示div中的列表，但在这里可以添加与您生成的名称相同的输入字段，以便将其绑定到所需的值。

我已经对您的jquery代码进行了一些更改，因为以前它没有正确地附加输入。因此，我已更正了这一点，现在每行都将附加在cloneItem内。

演示代码 ：

function addMovie() {
  var values = ""; //declare this
  //Keep track of number of movies
  var listCount = $('.cloneList').attr("data-count");
  var innerItem = $('div[id^="innerItem"]:last');
  var num = parseInt(innerItem.prop("id").match(/\d+/g),10) + 1;
  $('.cloneList').attr("data-count",num);

  var clone = innerItem.clone().prop('id','innerItem' + num).find("input:text").val("").end();
  //added this to show label attr correct value
  clone.find("label").attr("for","movieNameField" + num)
  clone.find('#movieName' + listCount).attr("name","movies[" + num + "].movieName").attr("id","movieNameField" + num).attr('path',"movies[" + num + "].movieName").text("");
  clone.find('#movieNameField' + listCount).attr("id","movieNameField" + num);

  clone.insertAfter("div.cloneItem:last")
  values = "<ul>"
  //loop through all inputs
  $(".cloneItem").find("input.values").each(function() {
    //check if values ! =null
    if ($(this).val() != "") {
      //append
      values += "<li>" + $(this).val() + " </li>"
    }
  })
  values += "</ul>"
  //add values to div
  $("#displays").html(values)
}
li {
  font-size: 14px;
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="files" class="list-section collapse in">
  <div class="item-list-container" id="groupedList">
    <div class="labels">
      <div class="item">Title</div>
    </div>
    <div class="grey-background">
      <div class="itemContainer">
        <div class="subGroup">
          <!--added id-->
          <div class="item " id="displays">Want to display names entered in form here</div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Start Clone Item -->
<div class="cloneList" data-count="1">
  <!-- Cloned item -->
  <div class="cloneItem" id="innerItem1">
    <div id="movieNameField1" class="form-group">
      <label for="movieName1">NAME</label>
      <div class="status-container">
        <!--added extra class=values-->
        <input id="movieName1" path="movies[1].movieName" maxlength="35" value="Movies1" class="form-control values" />
      </div>
      <form:errors path="movies[1].movieName" cssClass="errorShow" element="div" />
    </div>
  </div>

</div>
<!-- End Clone -->

<div class="row">
  <div class="col">
    <a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()">
     Add
    </a><br>
  </div>
</div>

javascriptjqueryjspjstlspring-mvc