Send selected record from a P: dataTable to form, JSF primefaces
Hello, I'm new here, and I'm migrating from Struts 1 to JSF.
I am developing in JSF a user registration screen. I would like that when I select a record from p:dataTable
, the data from that selected record goes to the form fields.
I've done this with struts, but using JSF primefaces I don't know how to do it.
Page Code:
<h:body>
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:panelGrid columns="2" style="horizontal-align:center">
<p:outputLabel for="id" value="ID:" />
<p:spinner id="id" value="#{UsuarioMB.usuario.id}" />
<p:outputLabel for="nome" value="Nome:" />
<p:inputText id="nome" value="#{UsuarioMB.usuario.nome}" />
<p:outputLabel for="senha" value="Senha:" />
<p:inputText id="senha" value="#{UsuarioMB.usuario.senha}" />
<p:outputLabel for="descricao" value="Descrição:" />
<p:inputTextarea id="descricao"
value="#{UsuarioMB.usuario.descricao}" />
<p:outputLabel for="dataCadastro" value="DataCadastro:" />
<p:calendar value="#{UsuarioMB.usuario.dataCadastro}" locale="pt_BR"
id="dataCadastro" showButtonPanel="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:calendar>
<p:commandButton value="Cadastrar" icon="ui-icon-star" action= "#{UsuarioMB.cadastraUsuario}" update="tabela,messages,@form" >
</p:commandButton>
<p:commandButton value="Consultar" icon="ui-icon-star" action= "#{UsuarioMB.consultar}" update="tabela,messages" >
</p:commandButton>
<p:commandButton value="Limpar" icon="ui-icon-star" action= "#{UsuarioMB.limpar}" update="tabela" type="reset" >
</p:commandButton>
</p:panelGrid>
<p:dataTable id="tabela" var="usuario" value="#{UsuarioMB.lista}"
paginator="true" rows="50" emptyMessage="Não há registros na lista"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,25,50,100">
<f:facet name="header">Lista de usuários</f:facet>
<p:column headerText="ID" style="width: 10%;"
sortBy="#{usuario.id}">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nome" style="width: 25%;" sortBy="#{usuario.nome}"> <h:outputText value="#{usuario.nome}" />
</p:column>
<p:column headerText="Descrição" style="width: 25%;" sortBy="#{usuario.descricao}">
<h:outputText value="#{usuario.descricao}" /></p:column>
<p:column headerText="Data de Cadastro" style="width: 25%;" sortBy="#{usuario.dataCadastro}">
<h:outputText value="#{usuario.dataCadastro}" />
</p:column>
</p:dataTable>
</h:form>
<h:body>
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:panelGrid columns="2" style="horizontal-align:center">
<p:outputLabel for="id" value="ID:" />
<p:spinner id="id" value="#{UsuarioMB.usuario.id}" />
<p:outputLabel for="nome" value="Nome:" />
<p:inputText id="nome" value="#{UsuarioMB.usuario.nome}" />
<p:outputLabel for="senha" value="Senha:" />
<p:inputText id="senha" value="#{UsuarioMB.usuario.senha}" />
<p:outputLabel for="descricao" value="Descrição:" />
<p:inputTextarea id="descricao"
value="#{UsuarioMB.usuario.descricao}" />
<p:outputLabel for="dataCadastro" value="DataCadastro:" />
<p:calendar value="#{UsuarioMB.usuario.dataCadastro}" locale="pt_BR"
id="dataCadastro" showButtonPanel="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:calendar>
<p:commandButton value="Cadastrar" icon="ui-icon-star" action= "#{UsuarioMB.cadastraUsuario}" update="tabela,messages,@form" >
</p:commandButton>
<p:commandButton value="Consultar" icon="ui-icon-star" action= "#{UsuarioMB.consultar}" update="tabela,messages" >
</p:commandButton>
<p:commandButton value="Limpar" icon="ui-icon-star" action= "#{UsuarioMB.limpar}" update="tabela" type="reset" >
</p:commandButton>
</p:panelGrid>
<p:dataTable id="tabela" var="usuario" value="#{UsuarioMB.lista}"
paginator="true" rows="50" emptyMessage="Não há registros na lista"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,25,50,100">
<f:facet name="header">Lista de usuários</f:facet>
<p:column headerText="ID" style="width: 10%;"
sortBy="#{usuario.id}">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nome" style="width: 25%;" sortBy="#{usuario.nome}"> <h:outputText value="#{usuario.nome}" />
</p:column>
<p:column headerText="Descrição" style="width: 25%;" sortBy="#{usuario.descricao}">
<h:outputText value="#{usuario.descricao}" /></p:column>
<p:column headerText="Data de Cadastro" style="width: 25%;" sortBy="#{usuario.dataCadastro}">
<h:outputText value="#{usuario.dataCadastro}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
Thank you, folks
1
Author: Icaro Martins, 2016-08-24
2 answers
You have to add the rowKey, selection, and selectionMode parameters in the dataTable. Inside it has to pass an ajax event from rowSelect.
<p:ajax event="rowSelect" update="frmUsuario" onstart="#{UsuarioMB.atualizarFormulario}"/>
Inside the function updateformulario you update the bean variables through the selected user that you pass through the selection in the dataTable.
1
Author: Marcos Siqueroli, 2016-08-26 01:16:33
Solved. I got people, follow the solution
<p:dataTable id="userTabela" var="usuario" value="#{UsuarioMB.lista}"
paginator="true" rows="10" emptyMessage="Não há registros na lista"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,25,50,100" rowKey="#{usuario.id}" selection="#{usuario}" selectionMode="single" >
<f:facet name="header">Lista de usuários</f:facet>
<p:ajax event="rowSelect" listener="#{UsuarioMB.onRowSelect}" update=":formUser" />
<!--.... resto dos campos !-->
código JAva
public void onRowSelect(SelectEvent event) {
Usuario us = (Usuario) event.getObject();
setUsuario(us);
}
public void setUsuario(Usuario usuario) {
this.usuario = usuario;
}
I appreciate everyone's tips and patience.
1
Author: Igor Leonardo Pereira da Silva, 2016-09-01 17:50:31