clever
Julho 18, 2011, 4:03pm
#1
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
clever
Julho 18, 2011, 8:33pm
#4
Muito obrigado Luciano, era aquela propriedade mesmo, funcionou perfeitamente.
Abraço.
clever
Julho 18, 2011, 10:42pm
#5
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.
clever
Julho 19, 2011, 7:36am
#7
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.
clever
Julho 19, 2011, 9:12am
#9
Os demos do prime nao falam nada sobre isso porque eles usam o [color=red]selectionMode=“true”[/color] na tabela deai ele faz isso automaticamente, mas eu nao posso fazer isso. A tabela que esta dentro de um panel, que esta dentro de um form é essa:
[code]<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>[/code]
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
clever
Julho 20, 2011, 10:30am
#12
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?