jsf中数据循环

1. h:dataTable
In dataTable, JSF helps you to generate all the HTML table tags.

<h:dataTable value="#{order.orderList}" var="o">
 
	<h:column>
		#{o.orderNo}
	</h:column>
 
	<h:column>
		#{o.productName}
	</h:column>
 
	<h:column>
		#{o.price}
	</h:column>
 
	<h:column>
		#{o.qty}
	</h:column>
 
</h:dataTable>

2. ui:repeat
In repeat tag, you have to put all the HTML table tags manually.

<table>
 
   <ui:repeat var="o" value="#{order.orderList}" varStatus="status">
 
	<tr>
		<td>#{o.orderNo}</td>
		<td>#{o.productName}</td>
		<td>#{o.price}</td>
		<td>#{o.qty}</td>
	</tr>
 
   </ui:repeat>
 
</table>

ui:repeat example

Here’s a JSF 2.0 ui:repeat example to render exactly the same HTML output like this h:dataTable example. Compare both and spot the different.

JSF…

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>JSF 2 ui:repeat tag example</h1>
 
    	<table class="order-table">
    		<tr>
    			<th class="order-table-header">Order No</th>
    			<th class="order-table-header">Product Name</th>
    			<th class="order-table-header">Price</th>
    			<th class="order-table-header">Quantity</th>
    		</tr>
    		<tbody>
	    		<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
	    			<h:panelGroup rendered="#{status.even}">
	   			  <tr>
		    			<td class="order-table-even-row">#{o.orderNo}</td>
		    			<td class="order-table-even-row">#{o.productName}</td>
		    			<td class="order-table-even-row">#{o.price}</td>
		    			<td class="order-table-even-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		        <h:panelGroup rendered="#{status.odd}">
	    			  <tr>
		    			<td class="order-table-odd-row">#{o.orderNo}</td>
		    			<td class="order-table-odd-row">#{o.productName}</td>
		    			<td class="order-table-odd-row">#{o.price}</td>
		    			<td class="order-table-odd-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		</ui:repeat>
    		</tbody>
    	</table>
    </h:body>
</html>
Note
You can find the “order” managed bean source code in this h:dataTable example.

The “ui:repeat” tag comes with many helpful attributes like offset, size, status and etc. Make sure you check this JSF ui:repeat javadoc.

Output

jsf2-repeat-example
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值