如何在JSF dataTable中添加行

此示例通过添加“ add”函数在dataTable中添加行来增强先前的删除dataTable行示例

这是一个JSF 2.0示例,向您展示如何在dataTable中添加一行。

1.托管豆

一个自解释的名为“ order”的托管bean。

package com.mkyong;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{

	private static final long serialVersionUID = 1L;

	String orderNo;
	String productName;
	BigDecimal price;
	int qty;

	//getter and setter methods

	private static final ArrayList<Order> orderList = 
		new ArrayList<Order>(Arrays.asList(
		
		new Order("A0001", "Intel CPU", 
				new BigDecimal("700.00"), 1),
		new Order("A0002", "Harddisk 10TB", 
				new BigDecimal("500.00"), 2),
		new Order("A0003", "Dell Laptop", 
				new BigDecimal("11600.00"), 8),
		new Order("A0004", "Samsung LCD", 
				new BigDecimal("5200.00"), 3),
		new Order("A0005", "A4Tech Mouse", 
				new BigDecimal("100.00"), 10)
	));
	 
	public ArrayList<Order> getOrderList() {
 
		return orderList;
 
	}
	
	public String addAction() {
	    
		Order order = new Order(this.orderNo, this.productName, 
			this.price, this.qty);
		
		orderList.add(order);
		return null;
	}
 
	public String deleteAction(Order order) {
	    
		orderList.remove(order);
		return null;
	}

	public static class Order{
		
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;

		public Order(String orderNo, String productName, 
				BigDecimal price, int qty) {
			this.orderNo = orderNo;
			this.productName = productName;
			this.price = price;
			this.qty = qty;
		}
		
		//getter and setter methods
	}
}

2. JSF页面

JSF页面显示带有dataTable标签的数据,以及用于键入订单数据的输入表单。

<?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:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
    	
    	<h1>JSF 2 dataTable example</h1>
    	<h:form>
    		<h:dataTable value="#{order.orderList}" var="o"
    			styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row"
    		>

    		<h:column>
    			
    			<f:facet name="header">Order No</f:facet>
    			#{o.orderNo}
    				
    		</h:column>
    			
    		<h:column>
    			
    			<f:facet name="header">Product Name</f:facet>
    			#{o.productName}
    				
    		</h:column>
    			
    		<h:column>
    				
    			<f:facet name="header">Price</f:facet>
    			#{o.price}
    				
    		</h:column>
    			
    		<h:column>
    				
    			<f:facet name="header">Quantity</f:facet>
    			#{o.qty}
    				
    		</h:column>
    		
    		<h:column>
    				
    			<f:facet name="header">Action</f:facet>
    				
    			<h:commandLink value="Delete" 
                                   action="#{order.deleteAction(o)}" />
    				
    		</h:column>
    			
    		</h:dataTable>
    		
    		<h2>Enter Order</h2>
    		<table>
    		<tr>
    			<td>Order No :</td>
    			<td><h:inputText size="10" value="#{order.orderNo}" /></td>
    		</tr>
    		<tr>
    			<td>Product Name :</td>
    			<td><h:inputText size="20" value="#{order.productName}" /></td>
    		</tr>
    		<tr>
    			<td>Quantity :</td>
    			<td><h:inputText size="5" value="#{order.price}" /></td>
    		</tr>
    		<tr>
    			<td>Price :</td>
    			<td><h:inputText size="10" value="#{order.qty}" /></td>
    		</tr>
    		</table>
    		
    		<h:commandButton value="Add" action="#{order.addAction}" />
    		
    	</h:form>
    </h:body>
</html>

3.演示

从上到下显示正在添加的行记录。

jsf2-dataTable-Add-Example-1
jsf2-dataTable-Add-Example-2
jsf2-dataTable-Add-Example-3

下载源代码

下载它– JSF-2-DataTable-Add-Example.zip (10KB)

翻译自: https://mkyong.com/jsf2/how-to-add-row-in-jsf-datatable/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值