2

質問は、javascript のインデックスを使用してスプリング モデル属性リスト要素を取得することに基づいており、html 要素の各名前にインデックスが含まれている必要があることを説明しています。使用例[0]

ユーザーがリストを送信する前にリストから要素を動的に追加または削除できるフォームがあります。例を挙げましょう: 3 人のユーザーを追加すると、フォームには 3 つの入力が含まれます。

<input name="user[0].name"    type="text" />
<input name="user[0].surname" type="text" />
<input name="user[1].name"    type="text" />
<input name="user[1].surname" type="text" />
<input name="user[2].name"    type="text" />
<input name="user[2].surname" type="text" />

これを送信すると、それぞれ名前と姓を持つ 3 人のユーザーが作成されます。しかし、ユーザー [1] を削除しようとすると問題が発生します。これは、次の html になるためです。

<input name="user[0].name"    type="text" />
<input name="user[0].surname" type="text" />
<input name="user[2].name"    type="text" />
<input name="user[2].surname" type="text" />

このフォームを送信すると、Springs は引き続き 3 人のユーザーを作成しますが、user[1] の名前と姓の値は null になります。

入力名を常に「正しい」形式で処理できることを知っています。しかし、別の解決策はありますか？みたいな形かと思った

<input name="user[].name"    type="text" />
<input name="user[].surname" type="text" />
<input name="user[].name"    type="text" />
<input name="user[].surname" type="text" />

問題を解決するかもしれませんが、私は気付きました：どの名前がどの姓に付いているかをどのように知ることができますか。

より良い解決策について何か考えはありますか?

4

1 に答える 1

1

最後に、インデックス付き変数なしですべての入力を追加しました（コードに従って、以前に欠落していたコンテナーを追加します）。

<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>
<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>
<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>

したがって、フォームを送信する前に、私は使用しますupdateIndexedInputNames($(".container"), "user");

そして、updateIndexedInputNamesのコードを共有しましょう：

function updateIndexedInputNames($container, name){
    $container.each(function(containerIndex, container){
        $(this).find("input,select").each(function(index, element){
            $(element).attr("name", name+"["+containerIndex+"]."+element.name);
        });
    });
}

これは@sp00mによって提案されたものよりも優れた解決策ではないと思いますが、それでも機能します。

これが誰かに役立つことを願っています！

于 2013-02-01T15:05:34.503 に答える