2

有人可以帮我解决以下问题吗?我在我的项目中使用 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} 不存在。路径为空。我这就是问题所在。有谁知道语法是否可以,或者我是否可以以其他方式写这个?

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

4

2 回答 2

4

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

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

于 2014-04-03T14:37:43.807 回答
1

如果您在页面呈现后检查其 HTML 源代码,您会注意到由于服务器端在到达浏览器之前的处理而发生的<\form:input>变化。<\input>

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

于 2012-09-29T17:48:38.807 回答