Estilizar faixas de linha e seleção em tr:table usando CSS

Question

Eu tenho uma tr:table que preciso estilizar usando CSS.Todas as funções normais de estilo de uma tabela estão funcionando, mas as faixas e a seleção de linhas não estão funcionando.Quando visualizo a fonte renderizada, não vejo diferença nas linhas para um ID ou classe se agarrar, e a documentação oficial não possui nenhum atributo para declarar uma classe de estilo para qualquer um deles.Isso é possível e, em caso afirmativo, o que preciso fazer para que meu CSS se agarre a ele?

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

Editar

Deixe-me tentar esclarecer o que está acontecendo.

Primeiro, usar a declaração acima diz ao jsf para gerar uma tabela, e o atributo rowBandingInterval diz para dar cores alternadas a cada linha (se fosse definido como 2, então faria 2 linhas de uma cor, 2 linhas de outra, 2 linhas da original , etc.)

Depois que a página é renderizada em HTML padrão, Trinidad (e JSF) aplicam suas próprias classes e IDs ao HTML.Meu procedimento normal é olhar o html renderizado, encontrar a classe que ele está aplicando e adicionar regras CSS para ele.No entanto, neste caso, nenhum estilo adicional é adicionado (nada no HTML renderizado indica que uma linha é diferente da outra).

Portanto, a questão é: como posso dizer a Trinidad para fornecer linhas alternadas e a linha selecionada pelo usuário com classes/IDs diferentes para eu usar CSS?

Editar 2

Apenas para manter alguém prestando atenção informado, não há alterações no atual td elementos também

Editar 3

Depois de trocar todos os atributos e, em seguida, reduzir todo o código ao seu esqueleto, encontrei o atributo de faixa de linha.As aulas de Trinidad são bastante complicadas e, a menos que você reformate o código e retire todo o ruído, não o verá.Trinidad adiciona a classe .af_column_cell-text-band para as linhas com faixas, enquanto as linhas normais acabaram de .af_column_cell-text.Então isso é metade do problema resolvido.Ainda preciso saber o seletor de uma linha selecionada pelo usuário, para a qual darei todas as bolinhas de gude a qualquer pessoa que possa me dar uma resposta exatamente para isso.

Answer 1

coloque esses seletores em seu arquivo trinidadskin.css (smSkin.css no meu caso):.AftableCellDatabackgroundColor: Alias ​​{Background-Color:#F5F5DC;}

.AFTABLECELLDABAVENDBackgroundColor: Alias ​​{Background-Color:#FFFFFF;}

Configuração de trinidad-skins.xml

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

Answer 2

Há um código jQuery agradável e simples para fazer o destaque da linha localizado aqui.

O jQuery é o seguinte

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

Então um pouco de CSS

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

btw, peguei todo esse código do seguinte site, onde você também pode Veja a demonstração.

Answer 3

Isso não está respondendo diretamente à sua pergunta, mas por que não usar o NTH-Child, pseudo-classe CSS3, para alcançar esse efeito? Por exemplo :

tr:nth-child(2n)
{
background-color:red;
}

Answer 4

Fiz algo errado durante o processo de registro, então essa é uma nova resposta em vez de um comentário.

Para lidar com o tópico de pele de Trinidad, você precisa fazer o seguinte:

No seu web.xml, você precisa definir este parâmetro como true durante o desenvolvimento:

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

Obtenha o Firebug para o seu Firefox. Com esse complemento, você pode determinar qual trinidad-seletor é usado em um componente.

Não há seletor para uma linha selecionada pelo usuário. Eu fiz desta maneira: dê ao seu objeto algo como uma "propriedade de destaque", que você altera se for o selecionado.

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

Faça isso em todas as colunas da sua mesa e você terminou.

Answer 5

Vou encaminhá -lo para a documentação de Trinidad.http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.htmlNo exemplo deles, eles declaram o banding como linha banding="row" Eu diria que o motivo pelo qual você não recebe nada é que você não declarou se for faixa de linha ou coluna.