How to conditionally render or style a row of prim

问题:

Inside my p:dataTable, I am trying to render only the rows I need. Code:

<h:form id="f">
    <p:dataTable var="order"
        value="#{mbOrderController.ordersList}">
        <f:facet name="header">#{msg.orders}</f:facet>

        <p:column sortBy="#{order.orderNr}"
            headerText="#{msg.order_number}">
            <p:outputLabel value="#{order.orderNr}"
                rendered="#{order.type.label == 'Shoes'}" />
        </p:column>

        <p:column sortBy="#{order.date}" headerText="#{msg.date}">
            <p:outputLabel value="#{order.date}">
                <f:convertDateTime pattern="dd.MM.yy" />
            </p:outputLabel>
        </p:column>

        <p:column sortBy="#{order.type.label}" headerText="#{msg.type}">
            <p:outputLabel value="#{order.type.label}" />
        </p:column>
    </p:dataTable>
</h:form>

The order type label (third column) is an Enumeration and can be "Shoes", "Shirts" or "Pants". I only want to display rows with "Shoes".

Tried to add the rendered attribute to the first p:outputLabel which hides only this output label of course. If I add the rendered attribute to each p:outputLabel in the table, the lowest row in the table is still visible, although all cells are empty:

How can I display only specific rows using the shown rendered attribute? Can anyone help?

回答1:

In your attempt, you're indeed only conditionally rendering the <td> contents, not the <tr>. Conditionally rendering a <tr> of a <p:dataTable> is unfortunately not possible.

You have basically two options:

1. Fix the model so that it's exactly what the view expects.

   <p:dataTable value="#{mbOrderController.shoesOrdersList}" var="shoesOrder">
   

2. Use rowStyleClass to hide or style specific rows by CSS.

   Hiding:

   <p:dataTable ... rowStyleClass="#{order.type.label == 'Shoes' ? 'ui-helper-hidden' : ''}">
   

   Styling:

   <p:dataTable ... rowStyleClass="#{order.type.label == 'Shoes' ? 'shoeStyle' : ''}">
   

   and defining a class selector containing 'shoeStyle' in css (taking css specificity into account)

回答2:

try rendering render="#{order.type.label eq 'Shoes'}" in column and if you don't want to write for all then you can use

<p:row render="#{order.type.label eq 'Shoes'}">
<p:column>
.
.
</p:row>