JSF中的columnClasses和rowClasses样式类

 JSF的标准HTML标签中（Standard HTML Tags）有h:panelGrid、h:dataTable，即实现HTML中的table标签功能。

  h:panelGrid、h:dataTable都有两个特殊的CSS样式属性，columnClasses（列样式类）和rowClasses（行样式类），它们不单单是加载一个CSS样式，而是加载一个CSS样式类，并且循环这个样式类，从而丰富了并简化了表格的表现。

例如要做一个3行6列的表格，定义有两个样式

 

.td1 { background:#cccccc; }
.td2 { background:#990000; }

   那我们在写JSF的时候只需要在h:panelGrid中加入columnClasses列（或rowClasses行）属性，其中是CSS类的列表，类之间用逗号分隔。如果这些列表包含的类名要比列或行少，则重新使用CSS类，即再次循环列表中的CSS样式。

<h:panelGrid columns="6" columnClasses="td1,td1,td2">
    <h:outputText value="01"/>
    <h:outputText value="02"/>
    <h:outputText value="03"/>
    <h:outputText value="04"/>
    <h:outputText value="05"/>
    <h:outputText value="06"/>
    <h:outputText value="07"/>
    <h:outputText value="08"/>
    <h:outputText value="09"/>
    <h:outputText value="10"/>
    <h:outputText value="11"/>
    <h:outputText value="12"/>
    <h:outputText value="13"/>
    <h:outputText value="14"/>
    <h:outputText value="15"/>
    <h:outputText value="16"/>
    <h:outputText value="17"/>
    <h:outputText value="18"/>
</h:panelGrid>

如果是用的如下rowClasses行属性

<h:panelGrid columns="6" rowClasses="td1,td2">

则表格表现为

当列和行两个属性都使用时，则样式服从于列样式，例如

<h:panelGrid columns="6" columnClasses="td1,td1,td2" rowClasses="td1,td2">

则表格表现和单独使用columnClasses列样式相同。

原文 http://www.java3z.com/cwbwebhome/article/article2a/220.html?id=125

 

  在JSF DataTable使用中的一些心得：

1. 要有分页功能，每页资料最好不要超过20行

2. 尽量避免在rowClasses和columnClasses中写复杂的CSS

3. 对于资料查询型的页面，最好不要用JavaScript遍历所有控件，因为有时控件的数量会令你吃惊的。

 

 

 

为了让rich:dataTable显示的表格更美观，比如行的背景色的间隔显示，以及鼠标划过行的高亮显示，可以使用如下的技术：

在美化时需要设置rich:dataTable的rowclass属性和styleclass属性。rowclass属性用于设置行的样式，设置的2个样式类名中间用逗号分隔。styleclass属性用于jquery的选RichFacas专题择器。

在鼠标划过的动作上，使用jquery，当鼠标划过、移出时添加和移出相应的样式类例如：

<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />

     <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

     <rich:jQuery selector=".stable tr" event="mouseover"

         query="jQuery(this).addClass('active-row')"/>

<rich:jQuery selector=".stable tr" event="mouseout"

        query="jQuery(this).removeClass('active-row')"/>

显示效果见：http://www.richfacescn.com/richfaces-showcase/richfaces/component-sample.jsf?demo=dataTable&sample=tableStyling

<ui:compositionxmlns="http://www.w3.org/1999/xhtml"

    xmlns:h="http://java.sun.com/jsf/html"

    xmlns:f="http://java.sun.com/jsf/core"

    xmlns:ui="http://java.sun.com/jsf/facelets"

    xmlns:a4j="http://richfaces.org/a4j"

    xmlns:rich="http://richfaces.org/rich">

    <style>

.even-row {

    background-color: #FCFFFE;

}

 

.odd-row {

    background-color: #ECF3FE;

}

 

.active-row {

    background-color: #FFEBDA !important;

    cursor: pointer;

}

</style>

    <h:formid="form">

        <rich:dataTablevalue="#{carsBean.allInventoryItems}"var="car"

            id="table"rows="20"rowClasses="odd-row, even-row"

            styleClass="stable">

            <rich:columnaccept="#{carsFiteringBean.acceptVendor}">

                <f:facetname="header">

                    <h:outputTextvalue="Vendor " />

                </f:facet>

                <h:outputTextvalue="#{car.vendor}"/>

            </rich:column>

            <rich:column>

                <f:facetname="header">

                    <h:outputTextvalue="Model"/>

                </f:facet>

                <h:outputTextvalue="#{car.model}"/>

            </rich:column>

            <rich:column>

                <f:facetname="header">

                    <h:outputTextvalue="Price"/>

                </f:facet>

                <h:outputTextvalue="#{car.price}"/>

            </rich:column>

            <rich:columnfilter="#{carsFilteringBean.mileageFilterImpl}">

                <f:facetname="header">

                    <h:outputTextvalue="Mileage"/>

                </f:facet>

                <h:outputTextvalue="#{car.mileage}"/>

            </rich:column>

            <rich:column>

                <f:facetname="header">

                    <h:outputTextvalue="VIN " />

                </f:facet>

                <h:outputTextvalue="#{car.vin}"/>

            </rich:column>

        </rich:dataTable>

    </h:form>

     

    <rich:jQueryselector=".stable tr:odd" query="addClass('odd-row')"/>

    <rich:jQueryselector=".stable tr:even" query="addClass('even-row')"/>

    <rich:jQueryselector=".stable tr" event="mouseover"

        query="jQuery(this).addClass('active-row')"/>

    <rich:jQueryselector=".stable tr" event="mouseout"

        query="jQuery(this).removeClass('active-row')"/>

 

</ui:composition>

 

http://www.richfacescn.com/topic_detail.html?id=167