This section includes two examples illustrating the editing of
displayed tables by the user:
- Editing the contents of individual table cells
- Deleting whole table rows
The examples show two corresponding methods for determining which row
the user has selected:
- Using a checkbox to set a bean property with a
DHTML onclick attribute
- Using an action method parameter to indicate the selected row
object
To edit table cells, you provide an input component for the cell you
want to edit.
In the
editing example you click a checkbox to edit a row.
- That causes a form submit that sets a boolean editable
property
- When the form is sent back an input component is used for
the cell being edited and an output component is used for
the rest
- When the Save changes button is clicked, the editable
part of the bean is updated
<h:dataTable value="#{tableData.names}" var="name">
<!-- checkbox column -->
<h:column>
<f:facet name="header">
<h:outputText value="#{msgs.editColumn}" style="font-weight: bold"/>
</f:facet>
<h:selectBooleanCheckbox value="#{name.editable}" onclick="submit()"/>
</h:column>
<!-- last name column -->
<h:column>
...
<h:inputText value="#{name.last}" rendered="#{name.editable}" size="10"/>
<h:outputText value="#{name.last}" rendered="#{not name.editable}"/>
</h:column>
...
</h:dataTable>
In the
delete example,
- Each row has a command link with an action method for
deleting the name object:
<h:dataTable value="#{tableData.names}" var="name" ...>
...
<h:commandLink value="Delete" action="#{tableData.deleteRow(name)}">
...
</h:dataTable>
- An ArrayList of name objects is used
to take advantage of the remove method:
public String deleteRow(Name nameToDelete) {
names.remove(nameToDelete);
return null;
}
Note that the name object itself is not sent between the client
and server.
Instead, each component in a data table has an ID that
contains its row number — that ID is used in JSF's HTTP
request decoding process to carry out the action method.