0

我的表格上有一个网格，上面有以下 jquery 的颜色；

$("#tblePagedList tr:even").addClass("row1");
$("#tblePagedList tr:odd").addClass("row2");

这很好用，除非当我通过使用 Ajax 对服务器的异步调用进行搜索并刷新我的网格时，这种特殊的样式消失了。

使用以下 jquery 重新加载表单；

   var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-scd-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });

        return false;
    };

一种尝试的解决方案是在上面的 done 函数中复制并粘贴 2 条样式行，但这没有任何区别。

我的表格看起来像；

@using SCD.Helpers
@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>

@{
    ViewBag.Title = "List Subcontractors";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<fieldset>
<legend>Subcontractors</legend>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

    <form method="get" action="@Url.Action("ListSubcontractors")" 
          data-scd-ajax="true" data-scd-target="#subcontractorList">
        <table class="searchTable">
            <tr>
                <td>Company: <input type="text" name="searchCompany" /></td>
                <td>Address: <input type="text" name="searchAddress" /></td>
                <td>Town/City: <input type="text" name="searchCity" /></td>
            </tr>
            <tr>
                <td>County: <input type="text" name="searchCounty" /></td>
                <td>Trade: <input type="text" name="searchTrade" /></td>
                <td>Other Trade: <input type="text" name="searchOtherTrade" /></td>
            </tr>
            <tr>
                <td colspan="2">@this.TempData["SearchMessage"].ToSafeString()</td>
                <td><input type="submit" value="Search" /> </td>
            </tr>
        </table>
    </form>
@Html.Partial("_Subcontractors")

</fieldset>

我的 PartialView 看起来像

@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>
<div id="subcontractorList">
    <div class="pagedList" data-scd-target="#subcontractorList">
        @Html.PagedListPager(Model, page => Url.Action("ListSubcontractors", new { page }),
        PagedListRenderOptions.DefaultPlusFirstAndLast)
    </div>
    <table id="tblePagedList">
        <thead>
            <tr>
                <th>
                    Company
                </th>
                <th>
                    Address
                </th>
                <th style="width:100px;">
                    Telephone
                </th>
                <th style="width:100px;">
                    Contact
                </th>
                <th style="width:100px;">
                    Trade
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tblePagedListBody"></tbody>
        @foreach (var item in Model) {
            <tr>
                <td>
                    @item.Company
                </td>
                <td>
                    @item.AddressLine
                </td>
                <td>
                    @item.Telephone
                </td>
                <td>
                    @item.Contact
                </td>
                <td>
                    @item.TradeName
                </td>
                <td>
                    @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId })
                </td>
            </tr>
        }

    </table>
</div>
4

1 回答 1

1

问题是从 AJAX 调用返回的 HTML 没有样式。解决方案是用返回的 html 替换网格后，只需重新设置网格的样式即可。

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-scd-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");

        $("#tblePagedList tr:even").addClass("row1");
        $("#tblePagedList tr:odd").addClass("row2");
    });
于 2012-12-13T17:06:55.983 回答