DataTable + JQuery + Estilos

2 de setembro de 2009 4 respostas

mlcalache 2 de setembro de 2009

Baseado nesse exemplo do LiveDemo Exadel:
http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=645A7947BB3DD159EF6155D159D4494D?c=jQuery&tab=usage

Gostaria de criar uma tabela igual ao exemplo apresentado.

Então fiz o seguinte código na minha página:

&lt;h:dataTable id="items" value="#{produtoBean.listaProdutos}" var="item" width="100%" &gt;
			
			&lt;f:facet name="header"&gt;
                &lt;rich:columnGroup&gt;
                    &lt;h:column&gt;&lt;h:outputText value="Status"/&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;h:outputText value="Status"/&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;h:outputText value="Status"/&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;h:outputText value="Status"/&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;h:outputText value="Status"/&gt;&lt;/h:column&gt;
                &lt;/rich:columnGroup&gt;
            &lt;/f:facet&gt;
			
			&lt;h:column&gt;
				&lt;h:outputText value="#{item.id}" /&gt;
			&lt;/h:column&gt;
			&lt;h:column&gt;
				&lt;h:outputText value="#{item.nome}" /&gt;
			&lt;/h:column&gt;
			&lt;h:column&gt;
				&lt;h:outputText value="#{item.descricao}" /&gt;
			&lt;/h:column&gt;
			&lt;h:column&gt;
				&lt;h:outputText value="#{item.categoria.nome}" /&gt;
			&lt;/h:column&gt;				
			&lt;h:column&gt;
				&lt;h:outputText value="#{item.fornecedor.nomeFantasia}" /&gt;
			&lt;/h:column&gt;
		&lt;/h:dataTable&gt;
    
        &lt;rich:jQuery selector="#items tr:odd" query="addClass('odd-row')" /&gt;
        &lt;rich:jQuery selector="#items tr:even" query="addClass('even-row')" /&gt;
        &lt;rich:jQuery selector="#items tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/&gt;
        &lt;rich:jQuery selector="#items tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/&gt;

Veja que na Imagem 1, o zebrado ficou certo e também o efeito de MouseOver.

Só que o problema é que isso está sendo aplicado também no Header (veja Imagem 2).
Porém eu gostaria de deixar o Header com o estilo do RichFaces… no meu caso, estou usando o skin Dark-X.

Imagem 1:

Imagem 2:

4 Respostas

Gbzao 2 de set. de 2009

Use CSS.

Não sei qual a cor do header que você quer, mas, não gosto de ficar dependendo de visuais do componente.

Crie um .css para os cabeçalhos e defina a cor da fonte, e a cor do background que você quer.

Exemplo:

th {
    color: white !important;
    background-color: #578BB8 !important;
}

mlcalache 2 de set. de 2009

Vou testar e posto aqui.

mlcalache 2 de set. de 2009

Gbzao!:
Use CSS.

Não sei qual a cor do header que você quer, mas, não gosto de ficar dependendo de visuais do componente.

Crie um .css para os cabeçalhos e defina a cor da fonte, e a cor do background que você quer.

Exemplo:

th { color: white !important; background-color: #578BB8 !important; }

Deu certo apenas colocando no <rich:columnGroup> :

&lt;f:facet name="header"&gt;
                &lt;rich:columnGroup styleClass="myheader"&gt;
                    &lt;h:column&gt;&lt;center&gt;&lt;h:outputText value="#{message.ID}"/&gt;&lt;/center&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;center&gt;&lt;h:outputText value="#{message.produto_listar_form_nome}"/&gt;&lt;/center&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;center&gt;&lt;h:outputText value="#{message.produto_listar_form_descricao}"/&gt;&lt;/center&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;center&gt;&lt;h:outputText value="#{message.produto_listar_form_categoria}"/&gt;&lt;/center&gt;&lt;/h:column&gt;
                    &lt;h:column&gt;&lt;center&gt;&lt;h:outputText value="Fornecedor"/&gt;&lt;/center&gt;&lt;/h:column&gt;
                &lt;/rich:columnGroup&gt;
            &lt;/f:facet&gt;

Colocando no headerclass do h:dataTable ou de cada h:column não dá certo.
Mas ainda tenho curiosidade de como deixar com o estilo do componente (no caso, o Dark-X).

Valeu Gbzao!!

mlcalache 2 de set. de 2009

Ah… esqueci do exemplo do Style:

<style  type=“text/css”>

.odd-row {

background-color: #ECF3FE;

}

.even-row {

background-color: #FCFFFE;

}

.active-row {

background-color: #FFEBDA;

}

.myheader {  
	color: white !important;  
	background-color: red !important;  
}

</style>

Criado 2 de setembro de 2009

Ultima resposta 2 de set. de 2009

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados