如何更新JSF dataTable中的行

cyan20115

于 2020-05-22 19:11:28 发布

阅读量193

点赞数

文章标签： java xhtml ui

此示例通过添加“ update ”功能来更新dataTable中的行，从而增强了先前的JSF 2 dataTable示例。

更新概念

总体概念很简单：

1.添加“ ediatble”属性以跟踪行编辑状态。

//...
public class Order{
		
	String orderNo;
	String productName;
	BigDecimal price;
	int qty;
		
	boolean editable;
		
	public boolean isEditable() {
		return editable;
	}
	public void setEditable(boolean editable) {
		this.editable = editable;
	}

2.在每行的末尾分配一个“编辑”链接，如果单击，则将“ ediatble”设置为true。在JSF 2.0中，您可以直接在方法表达式中提供参数值，请参见下面的edit操作：

//...
<h:dataTable value="#{order.orderList}" var="o">

<h:column>
    				
    	<f:facet name="header">Action</f:facet>
    				
    	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
    				
</h:column>

//...
public String editAction(Order order) {
	    
	order.setEditable(true);
	return null;
}

3.在JSF页面中，如果“ ediatble” = true，则显示输入文本框进行编辑；否则，仅显示正常的输出文本。模拟更新效果的简单技巧🙂

//...
<h:dataTable value="#{order.orderList}" var="o">

<h:column>
    			
    <f:facet name="header">Order No</f:facet>
    				
    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
    				
    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
					
</h:column>

4.最后，提供一个按钮来保存您的更改。在输入文本框中进行更改并将其保存后，所有值将自动绑定到关联的支持Bean。

//...
<h:commandButton value="Save Changes" action="#{order.saveAction}" />
</h:column>

例

一个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;

	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 saveAction() {
	    
		//get all existing value but set "editable" to false 
		for (Order order : orderList){
			order.setEditable(false);
		}
		//return to current page
		return null;
		
	}
	
	public String editAction(Order order) {
	    
		order.setEditable(true);
		return null;
	}
 
	public static class Order{
		
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;
		boolean editable;

		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>
    				
    		<h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
    				
    		<h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
					
    	     </h:column>
    			
    	     <h:column>
    			
    		<f:facet name="header">Product Name</f:facet>
    				
    		<h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />
    				
    		<h:outputText value="#{o.productName}" rendered="#{not o.editable}" />
    				
    	     </h:column>
    			
    	     <h:column>
    				
    		<f:facet name="header">Price</f:facet>
    				
    		<h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />
    				
    		<h:outputText value="#{o.price}" rendered="#{not o.editable}" />
    				
    	     </h:column>
    			
    	     <h:column>
    				
    		<f:facet name="header">Quantity</f:facet>
    				
    		<h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />
    				
    		<h:outputText value="#{o.qty}" rendered="#{not o.editable}" />
    				
    	     </h:column>
    		
    	     <h:column>
    				
    		<f:facet name="header">Action</f:facet>
    				
    		<h:commandLink value="Edit" action="#{order.editAction(o)}" 
                                       rendered="#{not o.editable}" />
    				
    	     </h:column>

    	  </h:dataTable>
    		
    	  <h:commandButton value="Save Changes" action="#{order.saveAction}" />
    		
      </h:form>
    </h:body>	
</html>

3.演示

从上到下显示正在更新的行记录。

下载源代码

下载它– JSF-2-DataTable-Update-Example.zip （10KB）

标签：数据表 JSF2 更新

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

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何更新JSF dataTable中的行

此示例通过添加“ update ”功能来更新dataTable中的行，从而增强了先前的JSF 2 dataTable示例。更新概念总体概念很简单： 1.添加“ ediatble”属性以跟踪行编辑状态。 //...public class Order{ String orderNo; String productName; BigDecimal price; ...
复制链接

扫一扫