富面孔dataTable StyleClass问题

Question

版本:

Apache MyFaces 2.1.14富Faces 4.3.5

发行:

我们正在从JSF1.2迁移到JSF2。问题是headerClass的样式不能正确应用于rich:dataTable。在调试时，富faces似乎用自己的样式覆盖了headerClass样式。富面板的syle选择器..rf dt-hdr-c覆盖自定义样式表选择器。(我们希望将标题的颜色替换为自定义标题图像)

最后，当富面孔提供的样式(.rf-dt-hdr-c)像下面代码所示的那样过度使用时，它就起作用了。但是，由于它是在样式中构建的富faces，所以它将应用于每一个富:dataTable，这可能不是一个好的选择。该方法如所示的here类似，在这里不起作用，因为没有规定将定制风格和内置风格结合在一起。是否有更好的方法来解决这个问题？是否有任何方法可以将自定义样式与.c一起应用，这样它就不会在全球范围内产生影响？请帮帮忙。

代码:

富数据表片段:

 <rich:dataTable id="admin" headerClass="richTableHeader1" styleClass="richDataTable1" rowClasses="evenRow,oddRow" 
                    columnClasses="columnRow" value="#{bean.list}" var="val">

样式:

.richDataTable1{    
    width:100%; 
}

<!-- this is the headerClass style used to apply custom image (not working )-->
.richTableHeader1{

    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;
}

<!-- rich faces applied style overriden (working )-->
.rf-dt-hdr-c{
    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;

}

Answer 1

这是一个表标题：

<thead id="form:j_idt10:th" class="rf-dt-thd">
    <tr id="form:j_idt10:h" class="rf-dt-hdr">
        <th class="rf-dt-hdr-c" colspan="2" scope="colgroup">Table</th>
    </tr>
</thead>

@headerClass应用于tr.rf-dt-hdr元素。所以你必须把你的定义改为

.richTableHeader1 th {
    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;
}

或者，您可以使用@headerCellClass，它不是一个文档化的特性，但它可以工作。