Question

我有一个与primefaces展示类似的表（第二个表 - 带复选框的多个选择）： http://www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf

当我将鼠标悬停在其中一个自动生成的复选框（标题中选择所有其他复选框的复选框）时，我想添加一个带有信息的弹出框（类似于HTML标题属性）。复选框由以下代码行生成：

<p:column selectionMode="multiple" style="width:2%" />

上面的代码创建了带有复选框行的列。标题行是一个特殊的复选框，它选择所有其他复选框。我想添加一个onhover消息，例如“点击这将选中所有复选框”，例如。

我尝试过以下但没有任何作用：

title属性
<p:toolkit>标记
<p:overlayPanel>标签（问题是它应该用在p：列中的某些元素上，例如文本，但在我的情况下，p：列中没有内容 - 只生成复选框）

Answer 1

我设法自己解决了。

我在<p:dataTable>之外创建了一个div（在我的情况下：在页面顶部）
在使用title="..."属性时，我称该div类似于默认弹出窗口。我还添加了position:absolute和display:none。
我添加了跟踪鼠标坐标的jQuery脚本，然后当鼠标结束时，复选框将它们用作div的top和left属性，并将div显示更改为block。它导致div在复选框悬停时出现在鼠标光标附近。

同样重要的是要知道在myfaces中我所指定的复选框始终是名为ui-chkbox-all的类

以下是代码：

<强> HTML：

<div id="test">TEST</div>

<强> CSS：

#test 
{
    border: 1px #767676 solid;
    color: #767676;
    padding: 2px;
    text-align: center;
    background-color: white;
    width: 100px;
    position: absolute;
    display: none;
}

<强> JAVASCRIPT / JQUERY：

var mouseX;
var mouseY;

$(document).mousemove( function(e) {
    mouseX = e.pageX - 80;
    mouseY = e.pageY - 80;
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseenter(function(){
        $("#test").css("display", "block");
        $("#test").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseleave(function(){
        $("#test").fadeOut('slow');
    });
});

使用selectionMode属性</p：column>将带有info的弹出窗口添加到<p：column>

1 个答案: