0

Bootstrap 3 モーダル テーブルには、input、textarea、および select 要素を含む行が含まれています。すべての行には、同じ要素を持つ同じ列があります。すべての行の要素は同じ名前です。

テーブル データは、ボタン クリックを使用した jquery ajax 呼び出しを使用して送信する必要があります。私は試した

$.ajax("api/Raport",
{
    contentType: "application/json",
    data: JSON.stringify({
        elements: { param1: 1, param2: 2} ,
        variable: $("#reportVariablesTable").serializeArray()
    }),
    type: 'POST'
});

ただし、変数プロパティは空の配列です。

次のような変数プロパティにテーブルの列の値をシリアル化する方法:

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
...

]

可能であれば、非表示の行を送信しないでください (テーブルの最初の行ではない可能性があります)

これは ASP .NET MVC4 アプリケーションです。これが役立つ場合は、HTML コードをリファクタリングできます。

意見：

<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <table class="table table-condensed table-striped" id="reportVariablesTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Value</th>
                            <th>Calculate</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- table contains one hidden rows which should not -->
                        <tr style='display:none'>
                            <td>
                                <input type="text" name="name">
                            </td>

                            <td>
                                <textarea name="valuetostore"></textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest">Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>

                        <!-- other are data rows which should sent -->
                        <tr>
                            <td>
                                <input type="text" name="name" value="variable1">
                            </td>

                            <td>
                                <textarea name="valuetostore">a-b</textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest" selected>Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>
                        ... remaining rows
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

テーブルを形にして使ってみた

    variable: $("#reportVariablesForm").serialize(),

名前/値オブジェクトを含む巨大な配列にシリアル化されます。

ここに画像の説明を入力

これを修正して、行要素名のプロパティ名を持つ行ごとに 1 つの要素を含む配列にフォームをシリアル化する方法:

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
...

]
4

2 に答える 2

0

.serializeArray ()メソッドはオブジェクトの JavaScript 配列を作成し、JSON 文字列としてエンコードする準備ができています。フォームおよび/またはフォーム コントロールの jQuery コレクションで動作します。

formHTMLにタグが必要です。

$(function() {
  $("#btnShow").on("click", function() {
    console.log($("#myForm").serializeArray());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              ... remaining rows
            </tbody>
          </table>
          <button id="btnShow" type="button">
            Show
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

于 2016-10-24T22:08:11.980 に答える