JSF dataTable 作为带有可点击行的 CSS 表？答案

【问题标题】：JSF dataTable as CSS table with clickable rows?JSF dataTable 作为带有可点击行的 CSS 表？
【发布时间】：2013-02-12 16:22:44
【问题描述】：

已提出相关问题，但由于还没有任何可靠/可接受的答案，我想我会重新措辞并澄清：

在 JSF 中是否有一种方法可以填充 dataTable 或相关的查询结果组件，而无需将渲染器重写为 W3C CSS 表？这必须启用可点击的行和行（相对于列）样式 a:hover 等。

查询中所需呈现的 JSF 组件 HTML 示例：

<div class="table">
    <a href="#" class="row">
        <span class="cell">Column-1-Value</span>
        <span class="cell">Column-2-Value</span>
    </a>
    ...
</div>

【问题讨论】：

您可以使用<ui:repeat> 手动渲染每一行。
谢谢 - 你能澄清一下吗？使用datatable 还是使用<c:forEach>？
你知道<h:dataTable>会生成一个<table> HTML组件。因此，如果您想避免这种情况并使用<div> 显示您的数据，您可以使用<ui:repeat> 遍历您的List<Data> 元素并使用纯HTML 元素构建您的表格。作为示例：<div class="table>"<ui:repeat value="#{bean.lstData}" value="data"><a href="#" class="row"><span class="cell">#{data.Value1}</span><span class="cell">#{data.Value2}</span></a></ui:repeat></div>
完美......你们太快了 - 我正要回答我自己的问题，因为我只是在工作。延迟是（我喜欢 JSF 的一件事）是 JSF 没有呈现零错误消息。原因？我使用的是“items”属性（来自dataTable）与“value”。 JSF 完全忽略了它，即使它应该抱怨“值”丢失并且“项目”属性不是 <ui:repeat> 架构的一部分。
<h:dataTable> 根本没有 items 属性。 <c:forEach> 有。

标签： html jsf css

【解决方案1】：

感谢提供的输入，这是在 Java EE/JSF 容器中测试的完整答案（相对于 cmets）：

<div class="table">
  <ui:repeat value="#{BackingBean.list}" var="item">
    <h:outputLink value="url">
      <f:param name="ID" value="#{item.ID}"/>
      <span class="cell">#{item.ID}</span>
      <span class="cell">#{item.Name}</span>
    </h:outputLink>
  </ui:repeat>
</div>

然后可以使用 CSS/3 display:table、display:table-row 和 display:table-cell 设置上述样式；分别。行是可点击的，并且可以根据需要设置样式。

【讨论】：