Bandes de lignes de style et sélection dans tr: table using CSS

Question

J'ai une table tr: que j'ai besoin de style en utilisant CSS. Toutes les fonctions de style normales d'une table fonctionnent, mais les bandes de lignes et la sélection de lignes ne sont pas disponibles. Lorsque je vois la source rendue, je ne vois pas de différence dans les lignes pour un id ou une classe à saisir, et la documentation officielle n'a aucun attribut pour déclarer une classe de style pour l'un ou l'autre. Est-ce possible et si oui, que dois-je faire pour que mon CSS soit accroché?

<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> 

Modifier

Permettez-moi de clairfy ce qui se passe. Tout d'abord, en utilisant la déclaration ci-dessus, on demande à jsf de générer une table, et l'attribut rowBandingInterval lui dit de donner à chaque ligne des couleurs alternées (si elle était définie sur 2, elle ferait 2 lignes une couleur, 2 lignes une autre, 2 lignes l'original, etc.)

Une fois la page rendue en html standard, trinidad (et jsf) appliquent leurs propres classes et identifiants au html. Ma procédure normale consiste à regarder le fichier html rendu, à trouver la classe qu'il applique et à ajouter des règles CSS pour cela. Cependant, dans ce cas, aucun style supplémentaire n'est ajouté (rien dans le rendu html ne signifie qu'une ligne est différente d'une autre).

Donc la question est, comment puis-je dire trinidad soit donner des lignes alternées et la ligne sélectionnée par l'utilisateur différentes classes/ID pour moi de saisir avec CSS?

Edit 2

Juste pour garder tout le monde en accordant une attention affichée, il n'y a aucun changement aux td éléments réels soit

Modifier 3

Après avoir mis en marche tous les attributs autour et puis en décapant tout le code jusqu'à ses os, j'ai trouvé l'attribut de regroupement de lignes. Les classes de Trinidad sont plutôt condamnées, et à moins que vous reformatiez le code et que vous ne retiriez tout le bruit, vous ne le verrez pas. Trinidad ajoute la classe .af_column_cell-text-band aux rangées en bandes, où les lignes normales ont juste .af_column_cell-text. Donc, c'est la moitié du problème résolu. J'ai encore besoin de connaître le sélecteur pour une rangée sélectionnée par l'utilisateur, pour laquelle je donnerai volontiers toutes les billes à quelqu'un qui peut me donner une réponse à cela.

Answer 1

mettre ces sélecteurs dans votre trinidadskin.css fichier (smSkin.css dans mon cas): .AFTableCellDataBackgroundColor: alias { background-color: # F5F5DC; }

.AFTableCellDataBandedBackgroundColor: alias { background-color: #FFFFFF; }

Configuration 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

Ceci ne répond pas directement à votre question, mais pourquoi ne pas utiliser la pseudo-classe CSS3 nth-child pour obtenir cet effet? Par exemple:

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

Answer 3

Je vais vous référer à la documentation trinidad. http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html Dans leur exemple, ils déclarent la bande comme la ligne banding="row" Je suppose que la raison pour laquelle vous n'obtenez rien est que vous n'avez pas déclaré si c'est une bande ou une colonne.

Answer 4

Il y a un code jquery simple et agréable pour faire la mise en surbrillance de ligne située here.

Le jQuery est la suivante

<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> 

Puis un peu de css

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

BTW Je pris tout ce code à partir du site suivant où vous pouvez également view the demo.

Answer 5

J'ai fait quelque chose de mal au cours du processus d'inscription, c'est donc une nouvelle réponse au lieu d'un commentaire.

Pour traiter le sujet-trinidad skinning vous devez effectuer les opérations suivantes:

Dans votre web.xml, vous devez définir ce paramètre à true en développant:

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

Get Firebug pour votre firefox. Avec ce module vous pouvez déterminer quel trinidad-selector est utilisé sur un composant.

Il n'y a pas de sélecteur pour une ligne sélectionnée par l'utilisateur. Je l'ai fait de cette façon: Donnez à votre objet quelque chose comme une "propriété en surbrillance", que vous modifiez s'il est sélectionné.

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

Faites cela pour toutes les colonnes de votre table et vous avez terminé.