如何有条件地渲染或设置一行primefaces dataTable的样式? [英] How to conditionally render or style a row of primefaces dataTable?

问题描述

在我的p:dataTable内，我试图仅渲染所需的行.代码:

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>

订单类型标签(第三列)是Enumeration，可以是鞋子"，衬衫"或裤子".我只想显示带有鞋子"的行.

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

试图将rendered属性添加到第一个p:outputLabel中，该属性当然仅隐藏此输出标签.如果我将rendered属性添加到表中的每个p:outputLabel，尽管所有单元格均为空，表的最低行仍然可见:

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:

如何使用显示的rendered属性仅显示特定行?有人可以帮忙吗?

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

推荐答案

实际上，您实际上只是在有条件地呈现<td>内容，而不是<tr>.不幸的是，有条件地渲染<p:dataTable>的<tr>是不可能的.

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.

您基本上有两种选择:

1. 修复模型，使其完全符合视图的期望.

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

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

使用rowStyleClass通过CSS隐藏或设置特定行的样式.

Use rowStyleClass to hide or style specific rows by CSS.

隐藏:

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

样式:

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

并在CSS中定义一个包含"shoeStyle"的类选择器(采用 css特异性)

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

这篇关于如何有条件地渲染或设置一行primefaces dataTable的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！