0

我正在使用 jQuery 数据表在 MVC 应用程序中显示我的表（客户端）。我正在使用下面的示例来突出显示选定的行。

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

该脚本基本上row_selected基于单击从行中添加或删除类。脚本已执行，但行未突出显示。

  • 我需要手动创建一个 cssrow_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

0 
Solve:-

=> the row_selected class is not been defined in jquery datatable. So, I need to define css by myself.

=> I have created a CSS with row_selected class before post this question but it did not highlighted row.


Wrong CSS - 

.row_selected {
    background-color:#5c87b2;
}

I replaced with below CSS and working fine.


Correct CSS - 

.row_selected {
    color:white;
}

.row_selected td {
    background-color:#5c87b2;
}

I solved my issue, but any one has an idea, why background-color attribute did not work with previous CSS for <tr></tr> ?? I am using HTML5.
于 2013-04-14T20:43:20.110 回答