当向表中插入一条新记录时，是否有一种方法来创建动画效果?

I've been googling this question a lot and I dont seem to find a solution. I wonder if any developer out there that able to achieve this? I know there are couple ajax framework out there for JSF like Richfaces, primefaces, icefaces ... I have look at their showcase, and could not seems to find what I am looking for.

我一直在用谷歌搜索这个问题，我似乎没有找到解决办法。我想知道是否有开发人员能够做到这一点?我知道JSF有几个ajax框架，比如Richfaces, primefaces, icefaces…我看了他们的橱窗，似乎找不到我要找的东西。

2 个解决方案

#1

This is how it would work for h:dataTable assuming that we always append to the table:

这就是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>

And the bean:

豆:

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

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

If you want to insert into selected position in the table, then it's better to use rich:extendedDataTable and use something like this as selector:

如果您想要在表中插入选定的位置，那么最好使用rich:extendedDataTable，并使用如下的选项:

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

#2

Richfaces has native support for jQuery using rich:jQuery component. You can use any effects that jQuery supports. For example:

Richfaces使用rich:jQuery组件对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')"/>

You can find more examples here: http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html

您可以在这里找到更多示例:http://docs.jboss.org/richfaces/latest_3_x/en/devguide/html/rich_jquery.html

#1