Discussoes de Programacao e Tecnologia

JSF:Mudar a cor da linha de um datatable no onclick

8 respostas
E
erickfm8

Ola pessoal, sou iniciante em jsf gostaria mudar a cor do fundo de um datatable usando seu onclick, ou seja quando o usuario clicar em uma linha mudar a cor dela. como eu posso fazer isso?

segue meu DataTable

<h:dataTable id="tblListaPessoa"
                                     value="#{mbPessoa.listaPessoa}"
                                     var="pessoa"
                                     border="1"
                                     width="615"
                                     headerClass="cabecalhoDataTable"
                                     bgcolor="white">
                            <h:column >
                                <f:facet name="header" >
                                    <h:outputText  style="color:black" value="Id" />
                                </f:facet>
                                <h:outputText  value="#{pessoa.id}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Nome" />
                                </f:facet>
                                <h:outputText value="#{pessoa.nome}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Rg"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.rg}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Cpf"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.cpf}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Cep"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.cep}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Tipo Pessoa"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.tipoPessoa}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Sexo"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.sexo}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Data de Nascimento"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.dataNascimento}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>
                            </h:column>
                            <h:column >
                                 <f:facet name="header">
                                    <h:outputText style="color:black" value="Apagar Registro"/>
                                </f:facet>
                                <h:commandButton value="Apagar" 
                                                 action="#{mbPessoa.apagar}"
                                                 immediate="true">
                                    <f:setPropertyActionListener target="#{mbPessoa.pessoa}"
                                                                 value="#{pessoa}"/>
                                </h:commandButton>
                            </h:column>
Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

8 Respostas

T
thiagowig

Tente assim:

Coloque uma String no seu bean que vai armazenar a cor.

private String colorDataTable;

No bgcolor do dataTable coloque assim:

bgcolor="#{yourBean.colorDataTable}"

E na action do seu botão, altere a cor da string que automaticamente alterará do dataTable

E
erickfm8

Então mais eu queria no ONCLICK da linha da tabela sabe? tipow dependendo da linha que o usuario clicar na tabela essa linha fica com outra cor

Obrigado por responder

T
thiagowig

Então usa o seguinte:

No botão:

onclick="alterarCor();"

No Script:

<script>

function alterarCor() {
      document.getElementById('idComponente').style.backgroundColor="red";
}

</script>
E
erickfm8

Então muito obrigado de estar me ajudando é que eu não conheço javascript, usava java swing

mais eu tentei testar esse exemplo e não funciono

esse idComponente é o que?
e esse document?

mesmo ctrl+c e ctrlv não funciona

Obrigado

T
thiagowig

vc deve colocar um id na sua column

assim: 
<h:column id="teste">
...
Não sei se vc quer usar um botão para alterar a cor mas se for coloque no onclick dele a chamada à função javascript: 
<h: commandButton onclick="alterarCor();">

E na sua página adicionar um javascript. (Gosto de colocar em um arquivo separado, mas só para exemplo coloque em sua página mesmo)
O idComponente será o id da sua column e o document refere-se a página atual ativa no browser.
Informo que quero pegar o componente da pagina que contem o id descrito e quero alterar o estilo.

<script type="text/javascript">  
  
function alterarCor() {  
      document.getElementById('idComponente').style.backgroundColor="red";  
}  
  
</script>

Espero ter ajudado

E
erickfm8 
page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%--
    This file is an entry point for JavaServer Faces application.
--%>
<f:view>
    <html>
        <head>
            <style type="text/css">
                .cabecalhoDataTable {
                    background-color:#CAE1FF;
                }
                .titulo {
                    color: black;
                    font-weight:bold;
                }
            </style>
            <script LANGUAGE="JavaScript"  TYPE="text/javascript">
                function alterarCor() {
                    document.getElementById('idc').style.backgroundColor="red";
                }
            </script>
            <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
                function confirmaExclusao(){
                    decisao = confirm("Deseja excluir este registro!");
                    if (decisao){
                        alert ("exclusão realizada com sucesso!");
                    }
                }
            </SCRIPT>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Cadastro de Clientes</title>
        </head>
        <body>
            <h:panelGrid  border="1"
                          columns="1"
                          width="697"
                          bgcolor="#FFFFF0">
                <h:outputText styleClass="titulo"
                              value="Cadastro de Clientes"/>
            </h:panelGrid>
            <h:panelGrid bgcolor="#FFFFF0"
                         border="1"
                         columns="1">
                <h:form id="frmCadastroCliente">
                    <h:panelGrid border="0"
                                 cellpadding="3"
                                 cellspacing="3"
                                 id="pnlCliente"
                                 columns="4"
                                 width="680">
                        <h:outputLabel for="itxNome"
                                       value="Nome :"/>
                        <h:inputText id="itxNome"
                                     value="#{mbPessoa.pessoa.nome}"
                                     required="true"/>
                        <h:outputLabel for="itxRg"
                                       value="Rg :"/>
                        <h:inputText id="itxRg"
                                     value="#{mbPessoa.pessoa.rg}"
                                     required="true">
                            <f:validateLength maximum="8" 
                                              minimum="8"/>
                        </h:inputText>
                        <h:outputLabel for="itxCpf"
                                       value="Cpf :"/>
                        <h:inputText id="itxCpf"
                                     value="#{mbPessoa.pessoa.cpf}"
                                     required="true">
                            <f:validateLength maximum="11" 
                                              minimum="11"/>
                        </h:inputText>
                        <h:outputLabel for="itxCep"
                                       value="Cep :"/>
                        <h:inputText id="itxCep"
                                     value="#{mbPessoa.pessoa.cep}"
                                     required="true">
                            <f:validateLength maximum="8" 
                                              minimum="8"/>
                        </h:inputText>
                        <h:outputLabel for="somnTpPessoa"
                                       value="Tipo Pessoa :"/>
                        <h:selectOneMenu id="somnTpPessoa"
                                         value="#{mbPessoa.pessoa.tipoPessoa}">
                            <f:selectItem itemLabel="Fisica"
                                          itemValue="Física"/>
                            <f:selectItem itemLabel="Jurídica"
                                          itemValue="Jurídica"/>
                        </h:selectOneMenu>
                        <h:outputLabel for="somnSexo"
                                       value="Sexo : "/>
                        <h:selectOneRadio id="somnSexo"
                                          value="#{mbPessoa.pessoa.sexo}"  required="true">
                            <f:selectItem itemLabel="Masculino"
                                          itemValue="Masculino"/>
                            <f:selectItem itemLabel="Femenino"
                                          itemValue="Femenino"/>
                        </h:selectOneRadio>
                        <h:outputLabel for="itxDataNascimento"
                                       value="Data Nascimento :"/>
                        <h:inputText id="itxDataNascimento"
                                     value="#{mbPessoa.pessoa.dataNascimento}"
                                     required="true">
                            <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:inputText>
                    </h:panelGrid>
                    <br><br>
                    <h:panelGrid  border="1"
                                  columns="1"
                                  cellpadding="5"
                                  width="687">
                        <h:column>
                            <h:commandButton id="btnVoltar"
                                             value="Voltar"/>
                            &nbsp&nbsp
                            <h:commandButton id="btnSalvar"
                                             value="Gravar"
                                             action="#{mbPessoa.gravar}"/>
                            &nbsp&nbsp
                            <h:commandButton id="btnLimparFormulario"
                                             type="reset"
                                             value="Limpar Formulário"
                                             immediate="true"/>
                        </h:column>
                    </h:panelGrid>
                    <h:panelGrid  width="680">
                        <h:message for="itxNome"
                                   style="color: red"/>
                        <h:message for="itxRg"
                                   style="color: red"/>
                        <h:message for="itxCpf"
                                   style="color: red"/>
                        <h:message for="itxCep"
                                   style="color: red"/>
                        <h:message for="somnSexo"
                                   style="color: red"/>
                        <h:message for="itxDataNascimento"
                                   style="color: red"/>
                        <h:outputText styleClass="titulo" value="Lista de Pessoa"/>
                        <h:dataTable id="tblListaPessoa"
                                     value="#{mbPessoa.listaPessoa}"
                                     var="pessoa"
                                     border="1"
                                     width="680"
                                     headerClass="cabecalhoDataTable"
                                     bgcolor="white"
                                     onclick="alterarCor();">
                            <h:column id="idc" >
                                <f:facet name="header" >
                                    <h:outputText  style="color:black" value="Id" />
                                </f:facet>
                                <h:outputText  value="#{pessoa.id}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Nome" />
                                </f:facet>
                                <h:outputText value="#{pessoa.nome}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Rg"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.rg}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Cpf"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.cpf}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Cep"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.cep}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Tipo Pessoa"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.tipoPessoa}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Sexo"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.sexo}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Data de Nascimento"/>
                                </f:facet>
                                <h:outputText value="#{pessoa.dataNascimento}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>
                            </h:column>
                            <h:column >
                                <f:facet name="header">
                                    <h:outputText style="color:black"
                                                  value="Apagar Registro"/>
                                </f:facet>
                                <h:commandButton value="Apagar" 
                                                 action="#{mbPessoa.apagar}"
                                                 immediate="true">
                                    <f:setPropertyActionListener target="#{mbPessoa.pessoa}"
                                                                 value="#{pessoa}"/>
                                </h:commandButton>
                            </h:column>
                            <h:column >
                                <f:facet name="header">
                                    <h:outputText style="color:black" value="Alterar Registro"/>
                                </f:facet>
                                <h:commandButton value="Alterar"
                                                 action="#{mbPessoa.irAlterar}"
                                                 immediate="true">
                                    <f:setPropertyActionListener target="#{mbPessoa.pessoa}"
                                                                 value="#{pessoa}"/>
                                </h:commandButton>
                            </h:column>
                        </h:dataTable>
                        <h:panelGrid border="1"
                                     columns="1"
                                     width="680">
                            <h:column>
                                <h:commandButton id="btnApagarTudo"
                                                 value="Apagar Todos"
                                                 action="#{mbPessoa.apagarTodos}"
                                                 immediate="true">
                                </h:commandButton>
                            </h:column>
                        </h:panelGrid>
                    </h:panelGrid>
                </h:form>
            </h:panelGrid>
        </body>
    </html>
</f:view>


segue meu jsf... = vc falo mais não funciona
E
erickfm8

Mais Alguem?

T
thiagowig

Verifica no html gerado qual o id da coluna idc.

Ele deve estar concatenado com o nome do form e do dataTable.

Ai vc altera a funcao alterarCor() pra pegar o elemento do id correto.

Criado 12 de abril de 2010
Ultima resposta 13 de abr. de 2010
Respostas 8
Participantes 2

Topicos relacionados

Editor de Jasper 8 respostas Gerador de formulários (Form Builder) em JSF 3 respostas Pagina xhtml nao renderiza jsf 13 respostas [RESOLVIDO]java.sql.SQLException 4 respostas Mostrar mensagem e redirecionar após 5 segundos! 3 respostas
Alura Sistemas operacionais: entenda seu conceito e suas funções Descubra o que são sistemas operacionais, suas funções e tipos. Aprenda tudo de forma clara e objetiva. Não perca tempo!
Casa do Codigo Aprenda JavaScript com Dashboards: Seus primeiros passos... Por Lucas Tauil — Casa do Codigo