JSF - Eliminar datos de una tabla de datos

En esta sección, mostraremos la capacidad de agregar eliminación en dataTable.

Aplicación de ejemplo

Creemos una aplicación JSF de prueba para probar la funcionalidad anterior.

Paso	Descripción
1	Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el subcapítulo JSF - Display DataTable del capítulo JSF - DataTables .
2	Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.
4	Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver.
5	Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso.

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">Delete</f:facet>
               <h:commandButton value = "Delete" 
                  action = "#{userData.deleteEmployee}"  />                
                  <f:setPropertyActionListener 
                     target = "#{userData.employee}" value = "#{employee}" />
               </h:commandButton>
            </h:column>
         
         </h:dataTable>  
      </h:form>
   </h:body>
</html>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.

Haga clic en el botón Eliminar de cualquier fila. Lo siguiente será la salida.

↰ Previous page