行悬停时的 PrimeFaces ContextMenu

Question

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

Answer 1

Primefaces 的 contextMenu 没有获取该选项的选项，因此您可以使用 jquery 来执行此操作。 如果要显示 contextMenu，则必须将 contextMenu 的位置更改为鼠标的位置（默认情况下页面加载 contextMenu，但它有 css display:none，因此您需要更改 css）。 Primefaces's contextMenu 有 widgetvar 属性在客户端使用（它有方法 show 来显示它）。

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

    <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>