Question

我有一个p：dataTable，我想创建并实现当我将鼠标悬停在一行上时，delete图像似乎允许我删除该行。我使用PrimeFaces.escapeClientId将jsf Id转换为id理解的jQuery。这是我到目前为止所得到的

<p:dataTable value=#{...} var="item">
   <p:column>
       <div onmouseover="jQuery(PrimeFaces.escapeClientId('deleteButton')).fadeIn()">
            <!-- Content of the row -->
            <p:commandButton id="deleteButton" image="delete" style="border: 0; display: none;" 
                              actionListener="#{bean.deleteRow(item)}" />
       </div>
   </p:column>
<p:dataTable>

不幸的是，它不起作用。 Firebug没有错误返回。请帮忙

Answer 1

当前的问题是你没有在“deleteButton”周围加上引号 - 所以javascript认为它是一个变量名，而不是字符串文字。

您可以轻松跳过整个id业务，只需将 this 作为jQuery上下文传递出来，例如“当前元素中的所有div”：

<p:column>
 <div onmouseover="jQuery('div', this).fadeIn()">
    to jest div
    <div style="color: wheat; background-color: green; display: none">
      <p:commandButton id="deleteButton" image="delete" style="border: 0" actionListener="#{bean.deleteRow(item)}" />
    </div>
 </div>
</p:column>

onmouseover 也适用于p：column。

Answer 2

使用onmouseenter和onmouseleave代替onmouseover和onmouseout，以避免因事件冒泡而导致闪烁

e.g。

<div onmouseenter="jQuery('span', this).fadeIn()" 
     onmouseleave="jQuery('span', this).fadeOut()">
     ...
</div>

OnMouseOver在p：dataTable的每一行内显示一个图像

2 个答案: