DataTable Zeilenfarbe

[TeamBob]

Hallo
Also ich habe mit JSF/ Richfaces eine Tabelle mit DataTable erstellt und möchte nur, dass sie die Zeilenfarben abwechseln. Also
1.weiß
2.hell blau
3.weiß
4.hell blau
....

Ich weis jedoch nicht wie ich das umsetzen soll???

<h:panelGroup layout="block"
style="padding-bottom:7px; padding-left:12px; padding-right:12px">
<rich:dataTable cellpadding="0" cellspacing="0" border="0" rows="15"
style="vertical-align:top; padding-bottom:20px" rowKeyVar="row"
value="#{dataList}" var="dataItem">


<rich:column width="80px" style="text-align:center">
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{dataItem.id}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.id}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="190px" style="text-align:center">
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{dataItem.name}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.name}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="190px" style="text-align:center">
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{dataItem.description}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.description}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="70px" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{msg['administration.edit']}"
style="FONT-WEIGHT: bold;" />
</f:facet>

<a4j:commandLink ajaxSingle="true"
oncomplete="#{rich:component('EditTable')}.show()">

<!--
value="#{msg['administration.edit']}"
reRender="table" action="#{datasourcesModell.delete}"
actionListener="#{datasourcesModell.currentRow}">
-->

<h:graphicImage value="/images/add.png" style="border:0" />
<f:setPropertyActionListener value="#{row}"
target="#{datasourcesModell.currentRow}" />
<h:inputHidden id="dataItemId" value="#{dataItem.id}" />
</a4j:commandLink>
</rich:column>


<rich:column width="70px" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{msg['administration.delete']}"
style="FONT-WEIGHT: bold;" />
</f:facet>
<a4j:commandLink ajaxSingle="true" id="deletelink"
oncomplete="#{rich:component('deletePanel')}.show()">
<h:graphicImage value="/images/delete.png" style="border:0" />
<f:setPropertyActionListener value="#{row}"
target="#{datasourcesModell.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="deletelink" value="Delete" />
</rich:column>

<f:facet name="footer">
<rich:datascroller renderIfSinglePage="false" maxPages="10" />
</f:facet>
</rich:dataTable>
</h:panelGroup>

[Christian Marquardt]

http://www.mastertheboss.com/en/web-...-tutorial.html

[TeamBob]

Danke erstmal für die Antwort aber mit scheint das nach keine
so idealen Lösung.

Das Problem ist da ich in meiner Tabelle auch ein add Button habe und beliebig viele Zeilen einfügen kann, kann ich ja nicht vorher schon row1 bis rowN beschriften... Am Anfang sind ja gar keine Roww vorhanden wie du im Quelltext siehst. Die werden erst mit add hinzugefüght und alle vorher fest zu deklarieren geht deshalb nicht weil ich ja dann wie gesagt 1-n nicht weis...

[Christian Marquardt]

Sehe nicht, dass das dort statisch gemacht wird. In der Bean werden zwar 2 TasklistData fest angelegt, doch nur als Demo. Kann man sicherlich auch mehr nehmen...

[TeamBob]

das steht eindeutig das da...

<style type="text/css">
.row1 {
background-color: #EDEBEB;
font-size: 10px;
}
.row2 {
background-color: #ffffff;
font-size: 10px;
}

</style>

und damit wird gesagt das .row1 die farbe bekommt und row2 die farbe..
Was ist mit row 3

[Christian Marquardt]

Da steht m.E. an anderer Stelle etwas anderes:


... rowClasses="row1, row2"

A comma-delimited list of CSS style classes that is applied to popup table rows. A space separated list of classes may also be specified for any individual row. The styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again

Wenn ich 2 Farben im Wechsel will definiere ich auch nur 2 Stylesheets

und damit wird gesagt das .row1 die farbe bekommt und row2 die farbe..
Was ist mit row 3

Nein, wird es m.E. nicht

[TeamBob]

hmm Also ich verstehe aber nicht warum bei mir keine Zeile anders aussieht und alle immernoch die gleich farbe haben

<f:verbatim>
<style type="text/css">
.row1 {
background-color: #EDEBEB;
font-size: 10px;
}
.row2 {
background-color: #ffffff;
font-size: 10px;
}

</style>
</f:verbatim>






<h:panelGrid columns="1" id="DeatailsDataSourcePanel" cellpadding="0"
cellspacing="0" border="7" style="BACKGROUND-COLOR:#e7e7e7">
<h:form style="BACKGROUND-COLOR:#e7e7e7">
<h:panelGroup layout="block"
style="padding-bottom:7px; padding-left:12px; padding-right:12px">
<rich:dataTable cellpadding="0" cellspacing="0" border="0" rows="15"
style="vertical-align:top; padding-bottom:20px" rowKeyVar="row"
value="#{dataList}" var="dataItem"
rowClasses="row1, row2">


<rich:column width="80px" style="text-align:center">
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{dataItem.id}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.id}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="190px" style="text-align:center">
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{dataItem.name}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.name}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="190px" style="text-align:center">
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{dataItem.description}"
rendered="#{dataItem.id != null}" />
<h:outputText value="#{dataItem.description}"
rendered="#{dataItem.id == null}" />
</rich:column>

<rich:column width="70px" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{msg['administration.edit']}"
style="FONT-WEIGHT: bold;" />
</f:facet>

<a4j:commandLink ajaxSingle="true"
oncomplete="#{rich:component('EditTable')}.show()">

<!--
value="#{msg['administration.edit']}"
reRender="table" action="#{datasourcesModell.delete}"
actionListener="#{datasourcesModell.currentRow}">
-->

<h:graphicImage value="/images/add.png" style="border:0" />
<f:setPropertyActionListener value="#{row}"
target="#{datasourcesModell.currentRow}" />
<h:inputHidden id="dataItemId" value="#{dataItem.id}" />
</a4j:commandLink>
</rich:column>


<rich:column width="70px" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{msg['administration.delete']}"
style="FONT-WEIGHT: bold;" />
</f:facet>
<a4j:commandLink ajaxSingle="true" id="deletelink"
oncomplete="#{rich:component('deletePanel')}.show()">
<h:graphicImage value="/images/delete.png" style="border:0" />
<f:setPropertyActionListener value="#{row}"
target="#{datasourcesModell.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="deletelink" value="Delete" />
</rich:column>

<f:facet name="footer">
<rich:datascroller renderIfSinglePage="false" maxPages="10" />
</f:facet>
</rich:dataTable>
</h:panelGroup>

[Christian Marquardt]

Würde ich mal den gerenderten Quelltext ansehen....

[TeamBob]

hä was meinst du ?
Ich meine ich habe oben die styles eingefügt mit 2 verschiedenen farben und die RowClasses Row1,Row2 in mein DataTable eingefügt. Müsste doch dann klappen. Warum gehts nicht...?

[Christian Marquardt]

Aha und wie stellst du fest, dass es nicht geht?

[TeamBob]

ich deploye das ganze project mit Jboss und schaue mir die Seite an und füge ein paar Zeilen hinzu mit add und es sehe alle gleich aus...

[Christian Marquardt]

und schaue mir die Seite

Doch vermutlich in einem Browser....und wie sieht dort der Quelltext aus..... der gerenderte Quelltext?

Ist der Style da, wird er genutzt usw.

[TeamBob]

also die Tabelle sieht wie vorher aus. Keine Zeile hat ne andere Farbe doer so...
habe eben mit FireBug mal den Quelltext angeschaut. Also demnach hat er wirklich immer abwechselnd row1 und row2 gemacht aber irgendwie hat er das mit den Hintergrund nicht gefunden. Also da stehen keine Farbeigenschaften...??

[Christian Marquardt]

Würde sagen, er findet den Stylesheet nicht....

[TeamBob]

hmm aber warum...
Die ganze Tabelle hat ja ne Hintergrundfarbe( eine graue ) aber die ist nirgends deklariet. Wahrscheinlich ein standart oderr so...