JSF：在将新记录插入表中时，有没有办法创建动画效果？

Question

我一直在谷歌搜索这个问题，但我似乎找不到解决方案。我想知道是否有能够实现这一目标的开发人员？我知道有几对Ajax框架为JSF，例如Richfaces，PrimeFaces，Icefaces ...我看了他们的展示柜，似乎找不到我想要的东西。

Answer 1

这就是它的工作方式 h:dataTable 假设我们总是附加到表：

<h:form>
 <h:panelGroup id="animatedTableGroup">
  <h:dataTable id="animatedTable" value="#{myBean.rows}" var="row">
   <h:column>
    <h:outputText value="#{row}"/>
   </h:column>
  </h:dataTable>
  <rich:jQuery timing="onload" 
        selector="#animatedTable tr:last" query="fadeOut('slow')"/>
  <rich:jQuery timing="onload" 
        selector="#animatedTable tr:last" query="fadeIn('slow')"/>
 </h:panelGroup>

 <a4j:commandButton value="Add row" 
      action="#{myBean.addRow}" reRender="animatedTableGroup"/>
</h:form>

和豆：

public void addRow() {
  rows.add(new Date().toString());
}

public List<String> getRows() {
  return rows;
}

如果要插入表中的选定位置，那么最好使用 rich:extendedDataTable 并将类似的东西作为选择器：

<rich:jQuery timing="onload" 
        selector="#animatedTable tr.rich-sdt-row-selected" query="..."/>

Answer 2

Richfaces 对本地支持 jQuery 使用 rich:jQuery 零件。您可以使用任何效果 jQuery 支持。例如：

<h:commandButton id="submitButton" value="Submit" 
   action="#{myBean.myAction}" style="display: none;"/>
<rich:jQuery selector="#submitButton" 
   query="fadeIn('slow')" timing="onload">

或者

<h:commandButton id="submitButton" value="Submit" 
   action="#{myBean.myAction}" 
   onmouseover="jQuery(this).fadeOut('slow');" 
   onmouseout="jQuery(this).fadeIn('slow')"/>

您可以在此处找到更多示例： http://docs.jboss.org/richfaces/latest_3_3_3_x/en/devguide/html/rich_jquery.html