JSF - Modifier les données d'un DataTable
Dans cette section, nous présenterons la fonctionnalité d'ajout de modification à une ligne dans un dataTable.
Exemple d'application
Créons une application JSF de test pour tester la fonctionnalité ci-dessus.
| Étape | La description |
|---|---|
| 1 | Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le sous-chapitre JSF - Display DataTable du chapitre JSF - Data Tables . |
| 2 | Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangés. |
| 3 | Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences. |
| 4 | Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver. |
| 5 | Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape. |
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>Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.
Cliquez sur le bouton d' édition de n'importe quelle ligne. Voici la sortie.
Cliquez sur le bouton Enregistrer les employés pour enregistrer la modification. Voici la sortie.
