1

我正在尝试使用 Kendo UI Grid 控件构建自定义悬停事件。使用锁定列时，我无法在鼠标悬停时突出显示整行。我一直无法找到一个简单的例子来效仿。

目前，悬停时的选择如下所示：

解锁网格部分鼠标悬停

锁定网格部分鼠标悬停

我编写了以下函数来尝试突出显示整行（锁定和解锁部分），但我似乎无法获得正确的 jQuery 选择器：

$("#ddhintgrid div.k-grid-content table tbody tr").hover(function () {
        //stuff to do on mouse enter
        var grid = $("#ddhintgrid").data("kendoGrid");
        var rowUid = grid.dataItem(this).uid;

            // select the row currently being edited
        $('[data-uid=' +rowUid + ']').addClass('k-state-hover');
    },
    function () {
        //stuff to do on mouse leave
        $("#ddhintgrid .k-state-hover").removeClass("k-state-hover");
    });

这个方法的内容并不重要。我只是希望它在用户将鼠标移动到网格未锁定部分中的一行上时触发。

我希望 .hover() 函数触发的元素是元素下的 tr<div class="k-grid-content>元素。看这里：

DOM 浏览器

4

3 回答 3

3

我通过修改此处找到的解决方案找到了答案：Add jQuery hover effect across two tables。

我将以下代码添加到我的网格的 dataSource 的 dataBound 函数中：

var $trs = $('table.k-selectable tbody tr');
$trs.hover(
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').addClass('k-state-hover');
    },
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').removeClass('k-state-hover');
    }
);

希望这可以帮助其他遇到此问题的人。还没有发现任何问题。

于 2016-03-10T13:31:10.447 回答
2

尝试

$("#ddhintgrid > .k-grid-content > table > tbody > tr:not(:first, :last)").hover(function () {...});

您需要排除第一个和最后一个（页眉和页脚）tr。

此外，您需要遍历对面的表以找到关联的行，以便将 CSS 设置为“k-state-hover”/

示例：我将鼠标悬停在锁定表中的 row1 上，现在该函数应该为锁定表 row1 设置 css，并在“k-grid-content”表中找到 row1，并为该行设置 css。这两行将具有不同的 UID，因此您不能依赖它进行比较，请尝试第 n 个孩子，或者如果您有行数据的唯一键，那么您可以使用它来比较它们。

于 2016-07-01T18:18:18.773 回答
0

为了正确地对排序等产生影响，这必须在dataBound网格上的事件中完成，或者应该能够在客户端完成。我没有测试这些，但它应该可以工作。

客户端绑定

您需要添加一个函数来使用切换类：

addHoverStyleToGridRow = function () {
    $("table.k-focusable tbody tr").hover(function() {
            $(this).toggleClass("k-state-hover");
        }
    );
};

然后在数据绑定中：

// this is where the hover effect function is bound to grid
$("#ddhintgrid").kendoGrid({ dataBound: addHoverStyleToGridRow });

服务器绑定

如果您使用的是服务器绑定网格，那么这个：

$(document).ready(function() {
     $("#ddhintgrid").find("table.k-focusable tbody tr").hover(function() {
            $(this).toggleClass("k-state-hover");
        }
    );
});
于 2016-03-09T23:05:15.767 回答