Arquivo Discussoes de Programacao e Tecnologia Boa tarde pessoa,
Estou trabalhando com PrimeFaces, tenho uma p:dataTable e quando eu passar em cima dela quero que as linhas mudam de cor, mas usar a propriedade [color=red]selectionMode[/color]. Com o RichFaces eu usuava as propriedades [color=red]onRowMouseOver[/color] e [color=red]onRowMouseOut[/color] mas no PrimeFaces não tem essas propriedades na p:dataTable.
Alguem pode me ajudar???
Abraço.
selectionMode=“true”, da uma olhada também nos exemplos que tem no site do prime cara
se for o caso, poderia usar jquery diretamente na página ai adicionaria um evento no mouseover da row, algo assim
Muito obrigado Luciano, era aquela propriedade mesmo, funcionou perfeitamente.
Abraço.
Pessoal, alarme falso kk, nao funcionou não. Quer dizer até funcionou mas dai o [color=red]selectionMode=“multiple”[/color] da coluna para de funcionar, e não pode acontecer isso. Eu nunca usei o [color=green]jquery[/color] poderiam me explicar como usa ou mandar uns códigos de exemplo???
Abraço.
Use o prime no lugar no jquery que você não vai ter esse problema.
Mas estou usando prime cara…
Primeiro você disse que tava usando primefaces,depois falou que não estava sabendo usar jquery, a forma de trabalhar com prime é diferente de jquery.Você ja tentou os demos do site do primefaces?Deu algum erro?Poste aqui seu código,fica bem melhor de saber qual o problema.
<p:dataTable id="dtCarreta" value="#{carretaMBean.cachedCarreta}" var="item" widgetVar=""
selection="#{carretaMBean.selectedCarretas}" emptyMessage="#{msgs.dtVazia}">
<f:facet name="header">
<p:commandButton id="cbtVisualizarCarreta" value="#{msgs.cbtVisualizarCarreta}" image="ui-icon ui-icon-search"
update="frmCadastrarCarreta:displayMulti" oncomplete="multiCarDialog.show()"/>
<p:tooltip for="cbtVisualizarCarreta" value="#{msgs.tpPesquisar}" showEffect="grow"
hideEffect="grow" showEffectLength="500" hideEffectLength="500" position="topRight"/>
<p:spacer width="20 px" />
<p:commandButton id="btnExcluirCarreta" value="#{msgs.cbtExcluirCarreta}"
image="ui-icon ui-icon-close" oncomplete="confirmation.show()" />
<p:tooltip for="btnExcluirCarreta" value="#{msgs.tpExcluir}" showEffect="grow" position="topRight"
hideEffect="grow" showEffectLength="500" hideEffectLength="500" />
</f:facet>
<p:column selectionMode="multiple" />
<p:column sortBy="#{item.codigocarreta}" filterBy="#{item.codigocarreta}">
<f:facet name="header">
<h:outputText value="#{msgs.optTableCodigoCarreta}" />
</f:facet>
<h:outputText value="#{item.codigocarreta}"/>
</p:column>
<p:column sortBy="#{item.descricao}" filterBy="#{item.descricao}">
<f:facet name="header">
<h:outputText value="#{msgs.optTableDescricaoCarreta}" />
</f:facet>
<h:outputText value="#{item.descricao}"/>
</p:column>
<p:column sortBy="#{item.placa}" filterBy="#{item.placa}">
<f:facet name="header">
<h:outputText value="#{msgs.optTablePlacaCarreta}" />
</f:facet>
<h:outputText value="#{item.placa}"/>
</p:column>
<p:column sortBy="#{item.ano}" filterBy="#{item.ano}">
<f:facet name="header">
<h:outputText value="#{msgs.optTableAnoCarreta}" />
</f:facet>
<h:outputText value="#{item.ano}"/>
</p:column>
<p:column sortBy="#{item.cor}" filterBy="#{item.cor}">
<f:facet name="header">
<h:outputText value="#{msgs.optTableCorCarreta}" />
</f:facet>
<h:outputText value="#{item.cor}"/>
</p:column>
<p:column sortBy="#{item.carroceria.descricao}" filterBy="#{item.carroceria.descricao}">
<f:facet name="header">
<h:outputText value="#{msgs.optTableCarroceriaCarreta}" />
</f:facet>
<h:outputText value="#{item.carroceria.descricao}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msgs.optTableAcao}" />
</f:facet>
<p:commandButton id="tpEditarCarreta" value="#{msgs.cbtEditarCarreta}" action="#{carretaMBean.showDetails}"
image="ui-icon-arrowrefresh-1-e" update="frmCadastrarCarreta:pnlCadastro">
<f:setPropertyActionListener value="#{item}" target="#{carretaMBean.selectedCarreta}" />
</p:commandButton>
<p:tooltip for="tpEditarCarreta" value="#{msgs.tpEditar}" showEffect="grow" position="topRight"
hideEffect="grow" showEffectLength="500" hideEffectLength="500" />
</p:column>
<!-- Exportar dados da Tabela -->
<f:facet name="footer">
<h:commandLink id="clkXls">
<p:graphicImage value="imagens/excel.png" />
<p:dataExporter type="xls" target="dtCarreta" fileName="#{msgs.dtEpt}"
excludeColumns="0, 7" postProcessor="#{carretaRelMBean.postProcessoXLS}"/>
</h:commandLink>
<p:tooltip for="clkXls" value="#{msgs.tpClkXls}" showEffect="grow" position="topRight"
hideEffect="grow" showEffectLength="100" hideEffectLength="500" />
<p:spacer height="10px" />
<h:commandLink id="clkPdf">
<p:graphicImage value="imagens/pdf.png" />
<p:dataExporter type="pdf" target="dtCarreta" fileName="#{msgs.dtEpt}" excludeColumns="0, 7"/>
</h:commandLink>
<p:tooltip for="clkPdf" value="#{msgs.tpClkPdf}" showEffect="grow" position="topRight"
hideEffect="grow" showEffectLength="100" hideEffectLength="500" />
</f:facet>
</p:dataTable>
se tivesse como usar o evento [color=red]onRowMouseOver[/color] e o [color=red]onRowMouseOut[/color] seria facil, mas nao tem.
Alguma ideia ??
O primefaces provavelmente encapsula os componentes com tudo, os eventos de javascript, o css, o html, usar JQuery é bem fácil, dá uma olhada no output HTML e ve se tem algum id(html) pra cada row, ou uma classe,
depois é só adicionar ao head da página:
Primeiro você tem que baixar um arquivo pra importar pro seu código, aqui está o link ->http://docs.jquery.com/Downloading_jQuery#Download_jQuery
E você importa o arquivo colocando isso aqui dentro da tag head:
<script src="endereçoDaPastaDoJavascript/jquery-1.4.4.min.js?ver=3.1.3" type="text/javascript">
Depois é só adicionar um evento, exemplo:
$(document).ready(function(){
$("#idDaRow").mouseover(function() {
$(this).css('background-color','#f00');
}).mouseout(function(){
$(this).css('background-color','#fff');
});
});
Espero que ajude
exemplo pra ajudar: http://jsbin.com/ulador/6
cara com o JQuery deu 2 problemas:
1ª = Ele nao funciona com um componente dentro do outro. ex:
<h:body>
<h:form id="frmCadastrarCarreta">
<h:outputLabel id="optDescricaoCarreta" value="#{msgs.optDescricaoCarreta}"/>
</h:form>
</h:body>
Se fisser assim:
<h:body>
<h:outputLabel id="optDescricaoCarreta" value="#{msgs.optDescricaoCarreta}"/>
</h:body>
dai funciona.
2ª = O JQuery da conflito com o JQuery já existem no Primefaces.
Tem alguma ideia para resolver esses problemas ??
Putz, nunca usei isso com o primeFaces, eer… talvez tenha alguma maneira de evitar esse conflito via JS mesmo,
já debuggou isso com um firebu ou similar? lança alguma exceção?