行悬停时的 PrimeFaces ContextMenu [英] PrimeFaces ContextMenu on row hover

问题描述

我正在尝试实现当鼠标悬停在一行上时出现的 ContextMenu.我能够在选定行上实现上下文菜单，但找不到悬停事件.我是否必须为数据表编写自己的实现，或者有没有办法将上下文菜单附加到悬停事件?

I am trying to implement a ContextMenu that appears when mouse is over a row. I was able to implement the context menu on selected row, but could not find an event for hover. Do I have to write my own implementation for data table, or is there a way to attach the context menu to a hover event?

推荐答案

Primefaces 的 contextMenu 没有选项，所以你可以使用 jquery 来做到这一点.如果要显示 contextMenu，则必须将 contextMenu 的位置更改为鼠标的位置(页面默认加载 contextMenu，但它有 css display:none，因此需要更改 css).Primefaces 的 contextMenu 有 widgetvar 属性可以在客户端使用(它有方法 show 来显示它).

Primefaces's contextMenu doesn't have option to get that, so you can use jquery to do that. If you want to show contextMenu, you have to change contextMenu's position to Mouse's position(page load contextMenu by default, but it have css display:none, so you need change css). Primefaces's contextMenu have widgetvar attribute to use in client(it have method show to show it).

我的解决方案是:当鼠标悬停在行上时，触发显示菜单，当鼠标移出时，它将菜单的 css 更改为 display:none.例如:我有一个表单(id:form)，一个数据表(id:cars，数据区有默认后缀id是_data，这种情况数据区有cars_data)，一个contextMenu(id:xxx)(您可以通过 mouseover 和 mouseout 在 jquery 中设置 Mouse hover 和 Mouse out)

My solution is: when mouse hover on row, it trigger to show menu, when mouse out it change menu's css to display:none. For ex: i have a form(id:form),a datatable(id:cars, data area have default suffix id is _data, it this situation data area have cars_data), a contextMenu(id:xxx) (You can set Mouse hover and Mouse out in jquery via mouseover and mouseout)

    <h:form id="form">
        <p:contextMenu id="xxx" widgetVar="men">
            <p:menuitem title="zzzz" value="xxx">
            </p:menuitem>
        </p:contextMenu>
        <style type="text/css">
            .testcss{
                display: none !important;
            }
        </style>
        <script type="text/javascript">
            //<![CDATA[
            $(document).on('mouseover', '#form\:cars_data', function(e) {
                $(PrimeFaces.escapeClientId('form:xxx')).css({
                    top: e.pageY+'px',
                    left: e.pageX+'px'                        
                }).show();
            }); 
            $(document).on('mouseout', '#form\:cars_data', function(e) {
                $(PrimeFaces.escapeClientId('form:xxx')).attr('style','display:none');
            }); 
            //]]>
        </script>
        <p:dataTable id="cars"  >  
           ...
        </p:dataTable>
    </h:form>

这篇关于行悬停时的 PrimeFaces ContextMenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！