JSF - 編輯 DataTable 的資料

在本節中，我們將展示如何在 dataTable 中的一行中新增編輯功能。

示例應用程式

讓我們建立一個測試 JSF 應用程式來測試上述功能。

步驟	描述
1	在包com.tutorialspoint.test 下使用名稱helloworld 建立一個專案，如在JSF - Data Tables 章節的JSF - Display DataTable 小章節中所述。
2	如下所述修改home.xhtml。保持其他檔案不變。
3	編譯並執行應用程式，確保業務邏輯按照要求工作。
4	最後，以 war 檔案的形式構建該應用程式，並將其部署在 Apache Tomcat Webserver 中。
5	使用適當的 URL 啟動你的網路應用程式，如下面的最後一步所述。

home.xhtml

<?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">
   
   <h:head>
      <title>JSF tutorial</title>		
      <h:outputStylesheet library = "css" name = "styles.css"  /> 	
   </h:head>
   
   <h:body> 
      <h2>DataTable Example</h2>
      
      <h:form>
         <h:dataTable value = "#{userData.employees}" var = "employee"
            styleClass = "employeeTable"
            headerClass = "employeeTableHeader"
            rowClasses = "employeeTableOddRow,employeeTableEvenRow">
            
            <h:column>    				
               <f:facet name = "header">Name</f:facet>    				
               <h:inputText value = "#{employee.name}"
                  size = "10" rendered = "#{employee.canEdit}" />
               <h:outputText value = "#{employee.name}"
                  rendered = "#{not employee.canEdit}" />
            </h:column>
            
            <h:column>
               <f:facet name = "header">Department</f:facet>
               <h:inputText value = "#{employee.department}" 
                  size = "20" rendered = "#{employee.canEdit}" />
               <h:outputText value = "#{employee.department}" 
                  rendered = "#{not employee.canEdit}" />
            </h:column>
            
            <h:column>
               <f:facet name = "header">Age</f:facet>
               <h:inputText value = "#{employee.age}" size = "5"
                  rendered = "#{employee.canEdit}" />
               <h:outputText value = "#{employee.age}" 
                  rendered = "#{not employee.canEdit}" />
            </h:column>
            
            <h:column>
               <f:facet name = "header">Salary</f:facet>
               <h:inputText value = "#{employee.salary}" 
                  size = "5" rendered = "#{employee.canEdit}" />
               <h:outputText value = "#{employee.salary}" 
                  rendered = "#{not employee.canEdit}" />
            </h:column>
            
            <h:column>
               <f:facet name = "header">Edit</f:facet>
               <h:commandButton value = "Edit" 
                  action = "#{userData.editEmployee}" 
                  rendered = "#{not employee.canEdit}">        
                  <f:setPropertyActionListener 
                  target = "#{userData.employee}" value = "#{employee}" />
               </h:commandButton>
            </h:column>
         </h:dataTable>  
         <br/>
         
         <h:commandButton value = "Save Employees"
            action = "#{userData.saveEmployees}" />	  
      </h:form>
   
   </h:body>
</html>

一旦你完成了所有更改，讓我們像在 JSF - 第一個應用程式章節中一樣編譯並執行應用程式。如果你的應用程式一切正常，這將產生以下結果。

點選任何行的編輯按鈕。以下內容將輸出。

點選儲存員工按鈕以儲存編輯。以下內容將輸出。

jsf_data_tables.htm

列印頁面