Jqgrid-在使用上下文菜单的行时如何保留悬停的样式 [英] Jqgrid - How to retain the hovered style when using context menu for a row

问题描述

在jqgrid中，当我将鼠标悬停在任何行上时，它将突出显示该行.但是当我使用上下文enu时，该行的突出显示样式消失了.

In jqgrid when I hover the mouse on any row it highlights the row. But when I use context enu, the highlighted style is gone for that row.

现在，用户不知道为上下文菜单打开了哪一行.我想知道我们是否可以保留徘徊的样式.我知道我们可以在选定行的网格上执行setSelect，但是我不想选择该行.预先感谢...

Now users are not aware which row was the context menu opened for. I would like to know if we can retain the hovered style. I know we can do setSelect on the grid for the selected row, but I don't want to select the row. Thanks in advance...

推荐答案

我建议您使用 mouseover 和 mouseleave (或

I suggest that you use mouseover and mouseleave (or the jQuery.hover event which is the same) to set the ui-state-hover class on the row on which the context menu will be opened. In the way you can fix the behavior from the standard

到以下:

演示实时演示了我的建议.我在下面包含的相应代码:

The demo demonstrate my suggestion live. The corresponding code I included below:

$grid.contextMenu('myMenu1', {
    bindings: {
        edit: function (trigger, currentTarget) {
            $(trigger).jqGrid('editRow',
                $(currentTarget).closest("tr.jqgrow").attr('id'),
                true);
        },
        del: function (trigger, currentTarget) {
            $(trigger).jqGrid('delGridRow',
                $(currentTarget).closest("tr.jqgrow").attr('id'));
        }
    },
    menuStyle: {
        backgroundColor: '#fcfdfd',
        border: '1px solid #a6c9e2',
        maxWidth: '600px',
        width: '100%'
    },
    itemHoverStyle: {
        border: '1px solid #79b7e7',
        color: '#1d5987',
        backgroundColor: '#d0e5f5'
    },
    onShowMenu: function (e, $menu) {
        var $row = $(e.target).closest('tr.jqgrow');
        $menu.mouseover(function () {
            try {
                $row.siblings().removeClass('ui-state-hover');
            } catch (e) {}
            $row.addClass('ui-state-hover');
        }).mouseleave(function (e) {
            var $rowNew = $(e.target).closest('tr.jqgrow');
            if ($rowNew.attr('id') !== $row.attr('id')) {
                $row.removeClass('ui-state-hover');
            }
        });
        return $menu;
    }
});

这篇关于Jqgrid-在使用上下文菜单的行时如何保留悬停的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！