使用 Jquery 为 spring 表单动态添加行答案

【问题标题】：Dynamically add rows for spring form using Jquery使用 Jquery 为 spring 表单动态添加行
【发布时间】：2012-07-15 21:50:30
【问题描述】：

有人可以帮我解决以下问题吗？我在我的项目中使用 spring，并且我有一个 jsp 页面，其中有一个表，其中第一行是从控制器加载的。该表还有一个“添加行”按钮，用户可以使用该按钮添加多行以在提交表单之前添加更多记录。发生的情况是我使用 AutopopulatingList ，因此在提交中每一行都作为控制器中的单独对象处理。我的问题是添加按钮。我使用 JQuery 来动态添加行。但是克隆选项不合适（如果我错了，我想纠正我）因为我无法处理列表的索引。我使用了以下但没有任何效果。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
 <!DOCTYPE html>
<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Addcolsinviews Add</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {

$("#addStudentButton").click(function() {

          $('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');     
          return false;

});
});
</script>

    </head>
<body>
    <%@include file="header.jsp" %>
    </div>
    <div class="main">
        <%@include file="tableslist.jsp" %>
        <div class="content">
            <div class="subtitle">ADDCOLSINVIEWS ADD</div>   

  <form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd">
        <table id="dataTable"> 
            <thead>
                    <tr margin-top="10px">
                        <th>Target View</th>
                        <th>Target Column</th>
                        <th>Source View</th>
                        <th>Source Column</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  id="rowToClone">                           
                     <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview">
                                <form:input path="${status.expression}"/>                              
                            </spring:bind></td>            
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>    
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>
                        <td>
                            <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol">
                                <form:input path="${status.expression}"/>
                            </spring:bind></td>  
                        <td><input type="button" id="addStudentButton" value="Add"/></td>

                    </tr>                        
             </tbody>
          </table>                 
           <input id="actionbtn" type="submit" value="Process">            
 </form:form>   
             </div>
      </div>                   
</body>
</html>

第二次试用是jquery的部分如下：

    <SCRIPT language="javascript">      

    $(document).ready(function() {

var incrementVar = 0;
$("#addStudentButton").click(function() {
    incrementVar++;
            var appendTxt = "<tr>";
        appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";                 

            appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";  

            appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td>";

           appendTxt = appendTxt +                     
             "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">";
            appendTxt = appendTxt + 
             "<form\:input path=\"${status.expression}\"/>";
            appendTxt = appendTxt +
             "</spring\:bind></td></tr>";
   alert(appendTxt);   

$("#dataTable tr:last").after(appendTxt);

</script>

上面的问题是根本没有添加行。该页面似乎尝试添加一行，但它太小了..我没有收到任何错误。在 appendTxt 的警报中 ${status.expression} 不存在。路径为空。我这就是问题所在。有谁知道语法是否可以，或者我是否可以以其他方式写这个？？

我不知道该怎么做，我已经搜索了很多.. 非常感谢您的帮助。

【问题讨论】：

为什么对一个元素使用 2 个点击处理程序？
你是什么意思2点击处理程序？我只有 addStudentButton 用于添加按钮..
我可以看到其中一个克隆，其中一个附加数据，这可能会在两者之间产生冲突。
哦不...我尝试了 2 种不同的方法。一个克隆并且它不起作用，因为 addcolsinviewsadd.addcolsinviews[0].targetview 的索引不能改变或者我不知道如何并且第二次试验甚至没有创建一个新行......
有人可以告诉我上面代码中带有弹簧绑定的表单是否可以被克隆？因为我认为（经过大量努力和搜索）新行所需的绑定无法像这样克隆......我应该使用 Ajax 吗？我将非常感谢某人的帮助。谢谢...

标签： jquery

【解决方案1】：

这里有一篇很有帮助的文章...jquery clone form fields and increment id

所以答案是使用 clone() 并使用正则表达式来增加您的索引。详细信息和示例在上面的链接中给出。附加 Spring 表单元素将不起作用，因为附加发生在浏览器端，而 Spring 表单元素是在服务器端编译的。浏览器对 Spring 元素一无所知。

【讨论】：

【解决方案2】：

如果您在页面呈现后检查其 HTML 源代码，您会注意到 <\form:input> 仅更改为 <\input>，这是因为在它到达浏览器之前在服务器端进行了处理。

因此，使用jQuery插入form:input是行不通的；您需要在其 HTML 呈现形式中输入它。查看已经渲染的 <\tr> 并以相同的格式复制其内容。（即不要使用path=，使用value=，name=等）。

【讨论】：