JSF - tomahawk t:panelGrid样式

Question

JSF:

...
    xmlns:t="http://myfaces.apache.org/tomahawk">
     <t:panelGrid columns="4">
       ...
     </t:panelGrid>

它使用tr's td' 和's元素动态生成普通的旧HTML表.

如何为这些tr和/或td元素设置特定的CSS样式？

Answer 1

使用columnClasses和rowClasses属性为每个单元格提供唯一的类

例如:

 <t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">

 </t:panelGrid>

columnClasses

columnClasses属性接受将应用于表的列的CSS样式类的逗号分隔列表.单个列的样式类也可以在空格分隔列表中定义.样式类应用于表列,作为呈现的td或th元素的class属性的值.

用于将CSS样式类应用于表列的算法很简单.在表呈现过程中,样式类一次一个地应用于列,直到(a)不再显示列或(b)不再应用样式类.

* If (a) happens at the same time as (b), the next row in the table is rendered.
* If (a) happens before (b), the remaining style classes are ignored.
* If (b) happens before (a), the remaining columns will not have style classes.

rowClasses

rowClasses属性接受以逗号分隔的CSS样式类列表,以应用于表的行.单个行的样式类也可以在空格分隔列表中定义.样式类应用于表行作为呈现的tr元素的class属性的值.

样式类按照定义的顺序应用于行.例如,如果有两个样式类,则第一行应用于第一行,第二行应用于第二行,第一行应用于第三行,第二行应用于第四行,依此类推.样式列表从头开始循环,直到不再显示任何行.

在我的标准JSF项目(Mojarra 2.0.3)中

此标记生成:

   <h:panelGrid border="1"
                columns="4" 
                columnClasses="a,b,c,d" 
                rowClasses="x,y,z">

                    <h:outputText value="ax"/>
                    <h:outputText value="bx"/>
                    <h:outputText value="cx"/>
                    <h:outputText value="dx"/>

                    <h:outputText value="ay"/>
                    <h:outputText value="by"/>
                    <h:outputText value="cy"/>
                    <h:outputText value="dy"/>

                    <h:outputText value="az"/>
                    <h:outputText value="bz"/>
                    <h:outputText value="cz"/>
                    <h:outputText value="dz"/>

   </h:panelGrid>

这个HTML:

    <table border="1">
        <tbody>
            <tr class="x">
                <td class="a">ax</td>
                <td class="b">bx</td>
                <td class="c">cx</td>
                <td class="d">dx</td>
            </tr>
            <tr class="y">
                <td class="a">ay</td>
                <td class="b">by</td>
                <td class="c">cy</td>
                <td class="d">dy</td>
            </tr>
            <tr class="z">
                <td class="a">az</td>
                <td class="b">bz</td>
                <td class="c">cz</td>
                <td class="d">dz</td>
            </tr>
        </tbody>
    </table>