[Resolvido] Filtro - DataTable do Primefaces

22 de agosto de 2011 4 respostas

deise.vicky 22 de agosto de 2011

Fala galera;

Tenho em uma tela um DataTable na qual, em algumas colunas, são apresentados valores do tipo Data.
Veja o código:

<p:dataTable id="grid" var="item" value="#{tipologiaMBean.todos}"
	   lazy="true" paginator="true" rows="20" rowsPerPageTemplate="5,10,20,50,100"
           paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
	   selection="#{tipologiaMBean.selecionados}" selectionMode="multiple" 
	   emptyMessage="#{gbl.nenhumRegistro}" styleClass="gridFieldSet">
	        		
	   <p:ajax event="rowSelect" update="btExcluir:button,mensagens"/>
	   <p:ajax event="rowUnselect" update="btExcluir:button,mensagens"/>
	        		
	   <p:column style="text-align:center; width:20px;">
			<p:commandButton title="#{gbl.editar}" action="#{tipologiaMBean.editar(item)}"
			    process="@this" update="dadosPanel" oncomplete="$('#txCodigo').focus().select();"  
			    image="ui-icon-pencil" style="height:18px; width:18px;"/>
	  </p:column>

	  <p:column filterBy="#{item.codigo}" sortBy="#{item.codigo}" styleClass="textCol" style="width:200px;">
		  <f:facet name="header"><h:outputText value="#{pg.codigo}"/></f:facet>
		  <h:outputText value="#{item.codigo}"/>
           </p:column>
		         
	   <p:column filterBy="#{item.descricao}" sortBy="#{item.descricao}" styleClass="textCol">
	 	   <f:facet name="header"><h:outputText value="#{pg.descricao}"/></f:facet>
                   <h:outputText value="#{item.descricao}"/>
	   </p:column>
		        
	   <p:column filterBy="#{item.dataInicio}" sortBy="#{item.dataInicio}" styleClass="textCol">
		   <f:facet name="header"><h:outputText value="#{pg.dataInicio}" title="xx/xx/xxxx"/></f:facet>
		   <h:outputText value="#{item.dataInicio}">
                           <f:convertDateTime locale="pt_BR" timeZone="America/Sao_Paulo"/>
                   </h:outputText>
	   </p:column>		        
		        
</p:dataTable>

O filtro funciona corretamente, mas, o usuário sempre tem que digitar a data com os ‘/’ para que seja feita a conversão de String para Date, senão o filtro não funciona.

Sendo assim, gostaria de saber se existe uma forma de colocar uma máscara no campo de filtro para facilitar a vida do usuário?
Já procurei muito na web mas não achei uma forma de fazer isso.
Se alguém puder me dar uma dica ficarei muito agradecida…

Obrigada!

4 Respostas

henriqueluz 22 de ago. de 2011

Oi deise.

Dá uma olhada no plugin jquery meio mask: http://www.meiocodigo.com/projects/meiomask/

Abração,

nei.junior 22 de ago. de 2011

Olá Deise.

Eu uso Primefaces + meioMask (que o henrique falou). Mas eu não consegui achar uma forma de setar a mascará por causa das seguintes situações:
1º - O “p:column” não tem o “alt” para setar a mascara igual o p:inputText;
2º - Esquecendo o “alt” tem uma forma de usar o “selector” do jQuery, porém o input que o Primefaces coloca no “p:column” precisaria ter ID fixo e não consegui colocar. Sendo assim toda vez ele gera dinâmico e não consigo setar.

Fora isso também tentei outras coisas e não consegui, a não ser alterando direto no fonte do Primefaces, mas ai não compensa.

Mas se achar uma outra solução, post aqui no fórum.

Abraço.

deise.vicky 22 de ago. de 2011

É nei.junior, o meioMask não resolve mesmo o problema.

Vou continuar pesquisando aqui, se conseguir resolver posto a solução.

Valeu!

deise.vicky 24 de ago. de 2011

Bom, problema resolvido! Aí vai a solução para quem precisar:
Tirei a solução do seguinte site: http://digitalbush.com/projects/masked-input-plugin/

Clique no link “Uncompressed” (Download Latest 1.3).
Crie um arquivo js e cole esse código.
No template do seu projeto aplique o exemplo da aba “Usage”.

Pronto, funciona perfeitamente!

No meu caso, a função para aplicar a máscara ficou assim:

jQuery(function($){
	$("input.data:text").mask("99/99/9999");
});

Traduzindo: a máscara será aplicada em todos os input com classe de css = data.

No DataTable fica assim:

<p:column filterBy="#{item.dataInicio}" sortBy="#{item.dataInicio}" styleClass="textCol" filterStyleClass="data">
    ..............................
</p:column>

Criado 22 de agosto de 2011

Ultima resposta 24 de ago. de 2011

Respostas 4

Participantes 3

4 Respostas

Topicos relacionados