0

私の MVC アプリケーションにはフォームがあり、2 つの非同期 AJAX 呼び出しを行います。1 つはデータの新しいページを取得するため、もう 1 つは検索結果を表示するためです。これらの呼び出しの前のフォームの初期ロードは問題ありません。行にカラーバーを付けたいのですが、これでうまくいきます。

$("#tblePagedList").on("change", styleRows);

function styleRows() {
    $("#tblePagedList tr:even").addClass("row1");
    $("#tblePagedList tr:odd").addClass("row2");
}

ただし、これらのスタイルは、新しいページに移動したり、検索を行ったりすると適用されません。変更イベントを接続しようとすると失敗します。

すなわち

$("#tblePagedList").on("change", styleRows);

また

$("#tblePagedList").change(styleRows);

私のテーブルは次のようになります。

<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>
    }
4

1 に答える 1

2

On Change イベントは、DOM が変更されたときではなく、入力の値が変更されたときにトリガーされます。イベントが必要な場合は、カスタム イベントを登録します。これを update と呼びましょう。

`$("#tblePagedList").on("update", handler)`

AJAX 呼び出しが成功したときに手動でトリガーします。

`$("#tblePagedList").trigger("update")`

しかし、本当にイベントが必要かどうかはわかりません。おそらくstyleRows、AJAX コールバックを呼び出すだけで十分でしょうか?

イベントのアイデアが本当に好きなら、BackboneJS に切り替えることを検討してください。フェッチしたデータをコレクションに保存し、コレクションの更新イベントにフックし、そのイベントでテーブルをレンダリングできます。

ところで、その後の 2 回のstyleRows呼び出しで間違った結果が返される可能性があります。古いクラスを削除してください。

関数 styleRows() {
    $("#tblePagedList tr:even").removeClass("row1 row2").addClass("row1");
    $("#tblePagedList tr:odd").removeClass("row1 row2").addClass("row2");
}
于 2012-12-17T10:38:21.740 に答える