2

誰かが次のことで私を助けてくれませんか? 私は自分のプロジェクトに春を使用しています。最初の行がコントローラーから読み込まれるテーブルを持つ 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>

2 番目の試行は、次のように 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>そのコンテンツを同じ形式でコピーします。(つまり、 、 、 などpath=を使用しないでください)。value=name=

于 2012-09-29T17:48:38.807 に答える