JSF: есть ли способ создать эффект анимации при вставке новой записи в таблицу? - PullRequest
Новая
       49

JSF: есть ли способ создать эффект анимации при вставке новой записи в таблицу?

1 голос
/ 21 сентября 2010

Я много гуглил этот вопрос и, похоже, не нашел решения. Интересно, есть ли разработчик, способный достичь этого? Я знаю, что есть пара фреймворков AJAX для JSF, таких как Richfaces, primefaces, icefaces ... Я посмотрел на их витрину и, похоже, не смог найти то, что искал.

Ответы [ 2 ]

3 голосов
/ 22 сентября 2010

Вот как это будет работать для 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="..."/>
1 голос
/ 22 сентября 2010

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_X/en/devguide/html/rich_jQuery.html

...