有条件地呈现列时，列标题不可见

Posted 2023-02-22

【中文标题】有条件地呈现列时，列标题不可见

【英文标题】：Column header not visible when column is conditionally rendered

【发布时间】：2014-10-19 20:31:45

【问题描述】：

我有一个h:dataTable。我想有条件地渲染一行如下：

<h:dataTable value="#myController.entities" var="entity">
 <h:column rendered="#entity.selected">
  <f:facet name="header">
   <h:outputText value="header" />
  </f:facet>
  <h:outputText value="#entity.name" />
 </h:column>
</h:dataTable>

在我的控制器中有变量List <Entity> 实体，它有getter 和setter。

Entity 类包含两个变量：boolean selected 和 String name 及其 getter 和 setter。

当#entity.selected 为假时，该行被隐藏。当#entity.selected 为真时，将显示该行，但没有标题。当我不在列上使用渲染属性时，我的标题变得可见。

这个问题类似于p:column header facet is not shown when rendered attribute is used on p:column

但是给定的解决方案都不适合我，而且我没有使用 primefaces。

有人可以帮我解决这个问题吗？我是 JSF 的新手，这个错误可能很愚蠢，而且很容易修复，但请帮我弄清楚。谢谢。

我正在发布我在尝试上述代码时得到的输出。

**Header**

name 0

name 1

name 2

name 3

name 4

此输出仅使用 <h:column> 显示数据表，而没有尝试有条件地呈现它。可以看到表头。

现在当我使用条件渲染时：

name 1

name 3

在此输出中，我尝试使用条件渲染<h:column rendered="#entity.selected">。正如您所看到的，对于“名称 0”、“名称 3”和“名称 5”，#entity.selected 是错误的，因此它不会呈现。 这正是我需要的，但前提是标题出现。

我想在#entity.selected 值为假的地方使我的行 不可见。还显示列标题。这可能吗？

【问题讨论】：

你为什么要根据 single 行的属性有条件地渲染 whole 列？其他行呢？这在技术上有何意义？你不应该改为#myController中的条件吗？

相关/欺骗：***.com/questions/11208721/…***.com/questions/16982720/…

非常感谢 BaluC 的回复。你当然是对的。它不是我不想呈现其整行的列。对 JSF 和数据表相当陌生，而且我的数据表只有一列，这让我感到困惑。我已经相应地编辑了问题。

【参考方案1】：

您需要将rendered 条件放在单元格上，而不是放在列上。

<h:dataTable value="#myController.entities" var="entity">
 <h:column>
  <f:facet name="header">
   <h:outputText value="header" />
  </f:facet>
  <h:outputText value="#entity.name" rendered="#entity.selected" />
 </h:column>
</h:dataTable>

或者，如果您有多个组件或表示单元格内容的纯文本，请将其包装在 <h:panelGroup> 或 <ui:fragment> 中。

<h:dataTable value="#myController.entities" var="entity">
 <h:column>
  <f:facet name="header">
   header
  </f:facet>
  <h:panelGroup rendered="#entity.selected">
   Blah blah #entity.name blah blah
  </h:panelGroup>
 </h:column>
</h:dataTable>

（注意：你不一定需要h:outputText，另见Is it suggested to use h:outputText for everything?）

如有必要，请在表格上应用以下 CSS 以隐藏空单元格，以防您已应用，例如表格单元格上的边框或背景色：

table 
    empty-cells: hide;

一个完全不同的替代方案是提供一个新模型，它只包含所需的实体：

<h:dataTable value="#myController.selectedEntities" var="entity">
 <h:column>
  <f:facet name="header">
   header
  </f:facet>
  #entity.name
 </h:column>
</h:dataTable>

【讨论】：

完美！ css 部分成功了。非常感谢巴鲁克！！我也想给+1，但声望不够:)

【参考方案2】：

代替

...
    <f:facet name="header">
       <h:outputText value="header" />
      </f:facet>
...

简单试试

...
    <f:facet name="header">Header</f:facet>
...

【讨论】：

这对我不起作用。感谢 Jas 的回复。