如何更改奇数列的 p:panelGrid 样式？

Question

我使用 jsf 2.2 和 primefaces，我实现了很多层（xhtml 个文件）。

来自我的 p:datalist，当我 select 一行时，我显示：编辑、创建或查看对话框，来自此代码 (List.xhtml ) :

<ui:composition template="/templateUser.xhtml">
<ui:define name="body">
    <h:form id="RefTableListForm">
        <p:panel header="#{bundle.Title}">
            <p:dataTable id="datalist" value="#{beanController.items}" var="item" ... >
                <p:ajax event="rowSelect"   update="createButton viewButton editButton "/>
                <p:ajax event="rowUnselect" update="createButton viewButton editButton "/>

                <p:column>
                    <f:facet name="header"><h:outputText value="#{bundle.Title_idAvis}"/></f:facet><h:outputText value="#{item.idAvis}"/>
                </p:column>
                <p:column>
                    <f:facet name="header"><h:outputText value="#{bundle.Title_libAvis}"/></f:facet><h:outputText value="#{item.libAvis}"/>
                </p:column>
                
                <f:facet name="footer">
                    <p:commandButton id="createButton" icon="ui-icon-plus"   value="#{bundle.Create}" actionListener="#{beanController.prepareCreate}" update=":RefTableCreateForm" oncomplete="PF('RefTableCreateDialog').show()"/>
                    <p:commandButton id="viewButton"   icon="ui-icon-search" value="#{bundle.View}" update=":RefTableViewForm" oncomplete="PF('RefTableViewDialog').show()" disabled="#{empty beanController.selected}"/>
                    <p:commandButton id="editButton"   icon="ui-icon-pencil" value="#{bundle.Edit}" update=":RefTableEditForm" oncomplete="PF('RefTableEditDialog').show()" disabled="#{empty beanController.selected}"/>
                    <ui:remove>
                    <p:commandButton id="deleteButton" icon="ui-icon-trash"  value="#{bundle.Delete}" actionListener="#{beanController.destroy}" update=":growl,datalist" disabled="#{empty beanController.selected}"/>
                    </ui:remove>
                </f:facet>
            </p:dataTable>
        </p:panel>
    </h:form>
    <ui:include src="Create.xhtml"/>
    <ui:include src="Edit.xhtml"/>
    <ui:include src="View.xhtml"/>
</ui:define></ui:composition>

但是现在，我会用 粗体字体 p:panelGrid 更改所有 ODD 列，如果可以的话？

在我的 css 文件中，我尝试使用此代码将所有奇数列以粗体显示：

.ui-panelgrid tr  {
    font-weight: bold !important;
}

但不适用于 View Dialog 他的所有列都是粗体，代码如下 (View.xhtml) :

<ui:composition>
<p:dialog id="RefTableViewDlg" widgetVar="RefTableViewDialog" modal="true" resizable="false" appendTo="@(body)" header="#{bundle.Title}">
    <h:form id="RefTableViewForm">
        <h:panelGroup id="display">
            <p:panelGrid columns="2" rendered="#{beanController.selected != null}">
                <h:outputText value="#{bundle.Label_idAvis}"/>
                <h:outputText value="#{beanController.selected.idAvis}" title="#{bundle.Title_idAvis}"/>
                <h:outputText value="#{bundle.Label_libAvis}"/>
                <h:outputText value="#{beanController.selected.libAvis}" title="#{bundle.Title_libAvis}"/>
            </p:panelGrid>
            <p:commandButton value="#{bundle.Close}" onclick="RefTableViewDialog.hide()"/>
        </h:panelGroup>
    </h:form>
</p:dialog></ui:composition>

我为视图对话框生成的 html 是：

   <html>
<form id="RefTableViewForm" name="RefTableViewForm" method="post"  >
<input type="hidden" name="RefTableViewForm" value="RefTableViewForm" />
<span id="RefTableViewForm:display">
<table id="RefTableViewForm:j_idt56" class="ui-panelgrid ui-widget" role="grid">
    <tbody>
        <tr class="ui-widget-content" role="row">
            <td role="gridcell" class="ui-panelgrid-cell">IdAvis:</td>
            <td role="gridcell" class="ui-panelgrid-cell"><span title="IdAvis">08</span></td>
        </tr>
        <tr class="ui-widget-content" role="row">
            <td role="gridcell" class="ui-panelgrid-cell">LibAvis:</td>
            <td role="gridcell" class="ui-panelgrid-cell"><span title="LibAvis">REGLEMENT PAR COMPTE DEVISES</span></td>
            </tr>

    </tbody>
</table>
<button id="RefTableViewForm:j_idt63"  />
</form>
</html>

但是从“编辑”或“创建”对话框中，我生成了这个 html :

<tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell"><label id="j_idt51" class="ui-outputlabel ui-widget" for="idAvis">IdAvis:</label></td>
        <td role="gridcell" class="ui-panelgrid-cell"><input id="idAvis" name="idAvis" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-disabled" title="IdAvis" /></td>
</tr>

感谢您的帮助和建议！

Answer 1

您的 CSS 将带有 class ui-panelgrid 的元素中包含的每个 table 行的字体粗细设置为粗体。这在某些情况下可能很好，但为了让每个奇数行的样式都像你想要的，CSS 内部有一个伪 class 可以提供帮助：nth-child()。您可以将数字、偶数、奇数或 An+B 形式的函数传递给它，它会相应地 select 行。函数参数 selects 每个 A 子节点从 B 的偏移量 0 开始。

为了让每个奇数 table 行都以粗体显示，您可以使用：

.ui-panelgrid tr:nth-child(odd) {
    font-weight: bold !important;
}

或者，可选地使用函数，这个：

.ui-panelgrid tr:nth-child(2n+1) {
    font-weight: bold !important;
}

这 selects 每个奇数 tr 驻留在具有 class ui-panelgrid 的元素内部，并且应该按照您计划的方式更改 table 的行. 不过请注意，并非所有浏览器都支持此功能，这取决于它们运行的版本有多旧。有关详细信息，请参阅上面链接的 guide。

如何更改奇数列的 p:panelGrid 样式？

How can I change style of p:panelGrid for odd columns?

css

primefaces

jsf-2.2