0

jQuery datatable を使用して、MVC アプリケーションでテーブル (クライアント側) を表示しています。以下の例を使用して、選択した行を強調表示しています。

http://www.datatables.net/beta/1.9/examples/api/select_single_row.html

row_selectedスクリプトは基本的に、クリックに基づいて行からクラスを追加または削除します。スクリプトは実行されますが、行は強調表示されません。

  • css を手動で作成する必要がありrow_selectedますか?
  • いいえの場合、このクラスはどこで定義されていますか? または、私は何を間違っていますか？最善の解決策は何ですか？
  • はいの場合、例を提案できますか?

前もって感謝します。

_Layout.cshtml:-

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    @Content.Css("DataTables-1.9.4/media/css/demo_page.css", Url)
    @Content.Css("DataTables-1.9.4/media/css/demo_table.css", Url)
    @Content.Css("DataTables-1.9.4/media/css/demo_table_jui.css", Url)
    @Content.Css("themes/base/jquery.ui.all.css", Url)

    @Content.Css("Site.css", Url)
    @Content.Script("jquery-1.5.1.min.js", Url)
    @Content.Script("jquery-ui-1.8.11.min.js", Url)
    @Content.Script("DataTables-1.9.4/media/js/jquery.dataTables.min.js", Url)
    @Content.Script("modernizr-1.7.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
</head>

Index.cshtml :- テーブルが定義されている部分ビューをレンダリングする

@model IEnumerable<User>

<div>
    @Html.Partial("_List", Model)
<div>

_List.cshtml:-

@model IEnumerable<User>

<div>  
<table id="jquery-datatable">
    <thead>
        <tr>
            <th>***</th>
            <th>***</th>
            <th>***</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>***</td>
            <td>***</td>
            <td>***</td>
        </tr>
        }
    </tbody>
</table>
</div>

<script type="text/javascript">
    var oTable;

    $(document).ready(function () {

        $('#jquery-datatable tbody tr').click(function (e) {
            alert ("Start...);
            if ($(this).hasClass('row_selected')) {
                $(this).removeClass('row_selected');
            }
            else {
                oTable.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }
            alert ("Finish...);
        });

        oTable = $('#jquery-datatable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "sScrollY": 200,
            "sScrollX": "100%",
            "bScrollCollapse": true
        });
    });
</script>
4

1 に答える 1