1

在我的部分视图中，我在这样的 Kendo Splitter 内声明了一个 Kendo Grid。

@(Html.Kendo().Splitter()
  .Name("adminSplitter")
  .Orientation(SplitterOrientation.Horizontal)

  .Panes(p =>
             {
                 p.Add()
                    .HtmlAttributes(new
                                            {
                                                id = "adminLeftHandPane"
                                            })
                    .Resizable(false)
                    .Size("150px")
                    .Content(@<text>
                                @(Html.Kendo().Grid<AdministrativeTask>()
                                    .Name("grdAdminTasks")
                                    .ClientRowTemplate("<tr class=\"gridRow\"><td style=\"cursor:pointer\"><img src=\"#=ImageUrl#\" style=\"height: 16px; width: 16px;\" />&nbsp;#=Title#</td></tr>")

                                    .Columns(c => c.Bound(i => i.Action)
                                                   .Title("Administrative Tasks"))
                                    .Selectable(s => s.Mode(GridSelectionMode.Single))
                                    .DataSource(ds => ds.Ajax().Read("LoadAdministrativeTasks", "Admin").ServerOperation(false))
                                    .Events(e => e.Change("change"))
                                )
                            </text>);
                 p.Add()

                    .HtmlAttributes(new
                                            {
                                                id = "adminRightHandPane"
                                            })
                    .Content(@<text>
                                  <div id="adminRightHandPaneContent"></div>
                              </text>)
                                            ;
             }
  )

  )

在同一个局部视图中，我的脚本看起来像这样

<script>
function change() {
    var row = this.select();
    var item = this.dataItem(row);

    $.ajax({
        url: '/' + item.Controller + '/' + item.Action,
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html',
        cache: false,
    })
                .success(function (result) {
                    // Display the section contents.
                    $('#adminRightHandPaneContent').html(result);
                })
                .error(function (xhr) {
                    $('#adminRightHandPaneContent').html("ERROR: <br><br>" + xhr.responseText);
                    //alert(xhr.responseText);
                });

}


$(document).ready(function () {
    alert($('.gridRow'));
    $(".gridRow").hover(

   function () {
       alert("hit");
       $(this).addClass("highlightRow");
   },
        function() {
            $(this).removeClass("highlightRow");
        }

 );
});

当部分视图加载时，我收到警报“[object Object]”，它告诉我 Jquery 找到了该行。但是，当我将鼠标悬停在有问题的行上时，我没有收到“命中”警报消息，所以此时我不知道如何继续。

当用户将鼠标悬停在该行上时，我试图突出显示该行。我究竟做错了什么？

4

4 回答 4

12

如果您只想在光标位于表格行上时更改行的样式，您可以简单地将 CSS 样式定义为：

#grid tbody tr:hover {
    background: #ff0000;
}

哪里grid是id网格。

看看这里是否运行http://jsfiddle.net/OnaBai/uN2W5/

所以你甚至不需要添加 CSS 类、悬停函数处理程序，......

于 2013-01-22T21:23:39.287 回答
8

通用形式：

.k-grid table tr:hover td {
background :rgb(107, 188, 242) !important;
cursor: pointer !important;
}
于 2014-08-27T10:53:26.603 回答
1

在 2016 年第一季度，剑道 ui 在 css 中有这条线

.k-grid tr:hover{background-image:url(textures/highlight.png);background-image:none,-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.45)),to(rgba(255,255,255,0)));background-image:none,-webkit-linear-gradient(top,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%);background-image:none,linear-gradient(to bottom,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%);background-color:#88c5e0}

所以它应该开箱即用

于 2016-02-12T18:02:07.310 回答
0 
.k-grid table tr.k-state-selected{background: red;color: black; }
于 2013-01-23T15:14:43.897 回答