Question

我一直在谷歌搜索这个问题，我似乎找不到解决方案。我想知道是否有任何开发人员能够实现这一目标？我知道JSF有几个ajax框架，如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 使用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')"/>

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

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

2 个答案: