0

テーブルから動的に行を追加および削除することについて、私は多くのことを読みました。私はすべてを正しい方法で行ったと確信しています。

私の見解：

 <table id="LibList" class="table table-responsive table-condensed table-bordered">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Types)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Balance)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Payment)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Interest)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Teams)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Tenure)
                    </th>
                    <th>

                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Step3.Liabilities) {
                    Html.RenderPartial("_LibListItem", item);
                }
            </tbody>
        </table>
        <p>
            <button type="button" class="btn btn-primary add-button">
                <span class="glyphicon glyphicon-plus"></span> Add New
            </button>
        </p>
    </div>

部分図:

<tr>
@using (@Html.BeginCollectionItem("Liabilities")) {
    <td>
        @Html.DropDownListFor(model => model.Type, Model.Types, new { @class = "form-control selectpicker", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Balance, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Payment, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Interest, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Teams, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Tenure, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        <button class="btn btn-primary remove-button" type="button" data-id="@Model.ID">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </td>
}

機能追加

 $('.add-button').click(function () {
        var action = "/QuestionWizard/AddRow";
        $.ajax({
            url: action,
            cache: false,
            success: function (result) {
                $("#LibList").find("tbody").append($(result));
            }
        });
    });

これはすべて正常に機能します。ただし、私が今抱えている問題は、新しい行が追加されたときに、css クラス「selectpicker」がドロップダウンに適用されないことです。

ドロップダウンのスタイルを設定するために、 bootstrap-selectを使用しています。これは、アプリケーションの他のどこでも問題なく機能します。

誰かが私が間違っていることを教えてください。

ありがとう。

4

1 に答える 1

1

selectpickers をレンダリングする関数を呼び出すだけです。

  $('.selectpicker').selectpicker();

要素を追加した後:

$('.add-button').click(function () {
    var action = "/QuestionWizard/AddRow";
    $.ajax({
        url: action,
        cache: false,
        success: function (result) {
            $("#LibList").find("tbody").append($(result));
            $('.selectpicker').selectpicker();
        }
    });
});

編集

@Stephen Muecke がコメントで示唆したように、すべての選択ピッカーを再レンダリングするのではなく、追加された要素のみを見つけてそのコンテンツのみをレンダリングすることをお勧めします。

$("#LibList").find("tbody").find('.selectpicker').last().selectpicker();

もちろん、これはパフォーマンスの観点から優れています。

于 2015-03-02T00:17:21.317 に答える