4

テーブルがあり、動的に行を追加/削除しました。テーブルには、コレクションとして MVC にポストバックされるフィールドが含まれています。このシナリオでは、jquery を使用してテーブルを更新することは、たとえば、不完全なコレクションを含むコレクションを作成することを意味します...

function add() {
     $.ajax({
            url: "GetRow",
            type: 'post',
            dataType: 'html',
            timeout: 30000,
            data: {
                RowIndex: otherRows.length,
                "Item.Property1": $("option:selected", dropDown).text(),
                "Item.Property2": $("option:selected", dropDown).val()
            },
            success: function (result) {
                var newRow = $(result);
                tableBody.append(newRow);
            }
        });
}

この関数は ajax 呼び出しを行い、指定されたインデックスの行の結果を返す mvc アクション結果を取得し、さらにページのドロップダウンからいくつかのデフォルト値を設定します。

ここで、jquery を使用して行を削除する「delete」と呼ばれる同様の関数があると仮定します。この時点で、テーブルには 3 つの行があり (もちろんヘッダー行は無視されます)、削除する行は中央の行です。

これは、私の行のフィールドがこのようなものになることを意味します...

//Row 1:
<input type="text" name="SomeCollection[0].Property1" /> 

//Row 2:
   Nothing, deleted of course

//Row 3: 
<input type="text" name="SomeCollection[2].Property1" />

したがって、ID 範囲に一貫性がないため、ポストバックを実行すると、MVC モデル バインダーはアイテム 1 のみをバインドし、アイテム 2 (実際にはクライアント側の削除前のアイテム 3) はマップされません。

アイデアは、サーバーロジックで非常に単純な「コレクション内のアイテムのIDがポストデータにない場合は、データベースから削除する」ことを望んでいるということです。このようにして、すべてのコレクション操作は完全にクライアント側で行うことができますこの非常に重いページで一定のポストバックを節約します。

そこで、問題を解決するためにjqueryに関数をまとめ始めました...

function updateNames(table) {
    var rows = $("tr", table);
    var index = 0;

    rows.each(function () {
        var inputFields = $("input");

        inputFields.each(function (){
          //replace name="bla[<any number>].Anything" with 
          //        name="bla[" + index + "].Anything"        
        });

        index++;
    });
}

だから私の質問は... jqueryに「name属性の[]を[index]に置き換える」と言うにはどうすればよいですか?

これでネストされたコレクションやその他の複雑なシナリオの問題が解決されないことはわかっていますが、この関数を解決したら、後でいつでも拡張でき、私の要件はまだそれほど複雑ではありません。

編集：

私の現在の思考パターンに関する追加の詳細...良いか悪いか？

name 属性の値を取得し、最初の「[」と次の「]」が見つかるまで「chars をウォーク」し、その間のすべてを置き換えると、問題は解決するはずですが、IE でのこの種の処理はおそらく非常に遅い.

「この巧妙な関数を呼び出すだけ」タイプの答えをきちんと得た人はいますか? （ある場合）。

編集2：

うわー、私は本当にもっともっと見なければなりません...私は今、2つの理由でなんと馬鹿げていると感じていますか（見ていないことと、ここでは正規表現が明らかな解決策です）

JQuery:特定の文字の間をすべて置き換える方法は?

正しい正規表現を見つけることができれば、解決策があります（正規表現の狂気に常に悩まされているので、それは私が尋ねるべきだった質問かもしれません）。

しかし、正規表現の力を過小評価することはできません:)

4

2 に答える 2

4

解決策はすでに得られていますが、この機能をゼロから実装する方法の実際のデモが役立つ可能性があると思いました。

delete各行にのクラスを持つボタンがあると仮定すると、次のようにしてこれを実現できます。

$('.delete').click(function(e) {
    // Get table body and rows
    var body = $(this).closest('tbody');

    // Remove current row
    $(this).closest('tr').remove();

    // Get new set of rows from table body
    var rows = body.find('tr')

    // Update all indeces in rows
    var re = new RegExp(/\[[0-9]+\]/);
    var index = 0;
    rows.each(function () {
        $(this).find('input').each(function (e) {
            var input = $(this).attr('name');
            if (input) {
                $(this).attr('name', input.replace(re, '['+index+']'));
            }
        });
        index ++;
    });
});

これにより、行が削除され、残りの行のすべての入力のすべてのインデックスが更新され、再び適切にインクリメントされます (したがって、モデル バインダーによって適切にバインドされます)。さらに、現在のテーブルに制限する必要があります。ここでそれが実行されます。

于 2013-05-04T14:49:59.493 に答える