Question

在我的局部视图中，我在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找到了这行。但是，当我将鼠标悬停在相关行上时，我没有收到“点击”警告消息，所以此时我对如何继续进行了处理。

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

Answer 1

如果您只想在光标位于表格行上时更改行的样式，则只需将CSS样式定义为：

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

grid是网格的id。

查看是否在此处http://jsfiddle.net/OnaBai/uN2W5/

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

Answer 2

以通用形式：

.k-grid table tr:hover td {
background :rgb(107, 188, 242) !important;
cursor: pointer !important;
}

Answer 3

2016年第一季度 kendo 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}

所以它应该开箱即用

Answer 4

.k-grid table tr.k-state-selected{background: red;color: black; }

Kendo.UI网格在悬停时更改行颜色

4 个答案: