[转]用RichFaces制作可展开的表格

可展开的表格可以用来显示表格中某一条记录的详细信息。在这个例子里面，我们使用一个额外的rich:dataTable来显示被选中行的详细信息。

 

 

点击任意一条记录后面的+/-号来显示该条记录的详细信息：

 

 

Xml代码

<h:form>
   <rich:dataTable value="#{wonderBean.wonders}" var="wonder">
      <rich:column colspan="3">
         <f:facet name="header">Wonder</f:facet>
	 <h:outputText value="#{wonder.name}" />
	 <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
		reRender="link">
	 <a4j:actionparam name="val" value="#{!wonderBean.show}"
		assignTo="#{wonderBean.show}" />
	 </a4j:commandLink>
      </rich:column>
      <rich:columnGroup>
         <rich:column>
	    <a4j:outputPanel ajaxRendered="true">
	         <rich:dataTable value="#{wonder.details}" var="detail"
		    rendered="#{wonderBean.show}" style="border: 0px">
	            <rich:column>
			<f:facet name="header">Location</f:facet>
			<h:outputText value="#{detail.location}" />
		    </rich:column>
		    <rich:column>
		       <f:facet name="header">Image</f:facet>
		       <h:graphicImage value="#{detail.imageUrl}" />
		    </rich:column>
		 </rich:dataTable>
	      </a4j:outputPanel>
	   </rich:column>
        </rich:columnGroup>
     </rich:dataTable>
</h:form>

 

Java代码

 

public class WonderBean {
   private WonderService service;
   private Boolean show;
 
   public Boolean getShow() { 
      return show;}
   public void setShow(Boolean show) {
	this.show = show;
   }
   public WonderService getService() {
	return service;
   }
   public void setService(WonderService service) {
	this.service = service;
   }
   public WonderBean() {
	super();	
   }
   public ArrayList<Wonder> getWonders() {
	return service.getList();
   }
}

 

Java代码

 

public class WonderService {
 
   private ArrayList <Wonder> list;
 
   public ArrayList<Wonder> getList() {
	return list;
   }
   @PostConstruct
   public void init () {
	list = new ArrayList <Wonder>();
	list.add(new Wonder("Chichen Itza", "Mexico", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG"));
	list.add(new Wonder("Christ the Redeemer", "Brazil", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg"));
	list.add(new Wonder("Colosseum", "Italy", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg"));
	list.add(new Wonder("Great Wall of China", "China", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg"));
	list.add(new Wonder("Machu Picchu", "Peru", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg"));
	list.add(new Wonder("Petra", "Jordan", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG"));
	list.add(new Wonder("Taj Mahal", "India", "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg"));		
	}
 
   public WonderService() {		
   }
}

 

Java代码

 

public class Wonder implements java.io.Serializable{
 
   private String name;
   private Details details;
 
   public String getName() {
	return name;
   }
   public void setName(String name) {
	this.name = name;
   }
   public Wonder(String name, String location, String imageUrl) {
	super();
	this.name = name;	
	this.details = new Details (location, imageUrl);
   }
   public Details getDetails() {
	return details;
   }
}

 

<managed-bean>  
  <managed-bean-name>wonderBean</managed-bean-name>  
  <managed-bean-class>data.WonderBean</managed-bean-class>  
  <managed-bean-scope>request</managed-bean-scope>  
  <managed-property>  
   <property-name>service</property-name>  
   <property-class>data.WonderService</property-class>  
   <value>#{service}</value>  
  </managed-property>  
 </managed-bean>  
 <managed-bean>  
  <managed-bean-name>service</managed-bean-name>  
  <managed-bean-class>data.WonderService</managed-bean-class>  
  <managed-bean-scope>session</managed-bean-scope>  
</managed-bean>