Question

我已经阅读了很多关于动态添加和删除表中行的信息。我非常肯定我已经以正确的方式做了一切。

我的观点：

 <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来设置我的下拉列表。这适用于应用程序中的其他任何位置。

请有人告诉我我做错了什么。

感谢。

Answer 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在评论中建议的那样，最好只找到附加的元素并仅渲染它的内容，而不是重新渲染所有的selectpickers。

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

从性能角度来看，这当然更好。

在动态添加的表行中丢失css样式

1 个答案: