将样式应用于特定的 ice:column

Question

我的问题很基本，但在 Google 上找不到答案。我确实想知道我是否遗漏了有关 ice:column 组件的某些内容。

我确实使用如下代码：

<ice:panelGrid columns="3">
  <ice:column style="background-color: yellow;">
    <ice:outputText value="..." />
  </ice:column>
  <ice:column>
    // row content
  </ice:column>
  <ice:column>
    // row content
  </ice:column>

  // other rows
</ice:panelGrid>

似乎 column 组件有一个 style 和 styleClass 属性，但是 HTML 中没有呈现任何内容。

如何使用 IceFaces 将样式应用于表格的特定单元格？

提前感谢您的回答。

Answer 1

与标准 JSF <h:panelGrid> 一样，<ice:panelGrid> 有一个 columnClasses 属性，它允许您指定以逗号分隔的列类列表，这些列类随后将应用于列。此外，在标准 JSF <h:panelGrid> 中，不支持 <h:column>。这仅在 <h:dataTable> 中受支持。相反，<h:panelGrid> 的每个直接子级都被视为单个列，如果您有多个组件需要放在单个列中，则可以只是 <h:outputText> 或 <h:panelGroup>。

所以，应该这样做：

<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
    <ice:panelGroup>row 1 col 1</ice:panelGroup>
    <ice:panelGroup>row 1 col 2</ice:panelGroup>
    <ice:panelGroup>row 1 col 3</ice:panelGroup>

    <ice:panelGroup>row 2 col 1</ice:panelGroup>
    <ice:panelGroup>row 2 col 2</ice:panelGroup>
    <ice:panelGroup>row 2 col 3</ice:panelGroup>

    ...
</ice:panelGrid>

会生成

<table>
  <tbody>
     <tr>
       <td class="col1">row 1 col 1</td>
       <td class="col2">row 1 col 2</td>
       <td class="col3">row 1 col 3</td>
     </tr>
     <tr>
       <td class="col1">row 2 col 1</td>
       <td class="col2">row 2 col 2</td>
       <td class="col3">row 2 col 3</td>
     </tr>
     ...
   </tbody>
</table>

您可以按照通常的方式在.col1、.col2 和.col3 类中指定样式。

.col1 {
    background: yellow;
}