Rich Faces dataTable StyleClass问题 [英] Rich Faces dataTable StyleClass Issue

问题描述

版本:

Apache MyFaces 2.1.14 Rich Faces 4.3.5

Apache MyFaces 2.1.14 Rich Faces 4.3.5

问题:

我们正在从JSF1.2迁移到JSF2.问题是headerType的样式未正确应用于rich:dataTable. 在调试时，似乎富面孔用其自己的样式覆盖headerClass样式. 丰富面孔的样式选择器.rf-dt-hdr-c会覆盖自定义样式表选择器. (我们要用自定义标题图片替换标题的颜色)

We are migrating from JSF1.2 to JSF2. The issue is the style for headerClass is not getting applied correctly for rich:dataTable. When debugged , it seems that rich faces overrides the headerClass style with its own styles. The syle selector .rf-dt-hdr-c of rich faces overrides the custom style sheet selector. (We want to replace the colour of header with custom header image)

最后，当像下面的代码所示那样覆盖提供的样式丰富的面孔(.rf-dt-hdr-c)时，它可以工作. 但是由于它是内置样式的丰富面孔，因此它将应用于每个rich:dataTable，这可能不是一个好选择. 此处所示的方法类似，无法正常工作这里没有提供将自定义样式与内置样式相结合的规定. 有没有更好的方法可以解决此问题? 有什么方法可以将自定义样式与.rf-dt-hdr-c一起应用，以使其不会在全局范围内生效? 请帮忙.

Finally , when rich faces supplied style (.rf-dt-hdr-c) is overriden like shown in code below , it worked. But since it is rich faces built in style , it will be applied to every rich:dataTable which may not be a good option. The approch as shown here which is similar , is not working here since there is no provision to combine custom style with built in one. Is there any better approach available to solve this issue ? Is there any way custom style can be applied alongwith .rf-dt-hdr-c so that it won't effect globally ? Please help.

代码:

丰富的数据表摘要:

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

}

推荐答案

这是一个表头:

<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元素.因此，您必须将定义更改为

@headerClass is applied to the tr.rf-dt-hdr element. So you have to change your definition to

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

或者您可以使用@headerCellClass，它不是文档功能，但可以使用.

Alternatively you can use @headerCellClass, it is not a documented feature but it works.

这篇关于Rich Faces dataTable StyleClass问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！