如何在丰富的数据表中创建可点击的行？答案

【问题标题】：How to make a clickable row in a rich:datatable?如何在丰富的数据表中创建可点击的行？
【发布时间】：2012-01-15 08:47:10
【问题描述】：

我有一个带有 rich:dataTable 的 JSF 页面，其中在每一行中，我将 h:commandLinks 放入带有所选行详细信息的页面。

我想让整行都可以点击，当用户点击行中的任意位置时调用 action 方法。

如果没有 JavaScript，这可能吗？如果 JavaScript 是唯一的出路，那么最好的方法是什么？搜索 commandLink 并“单击”它？

提前致谢！

【问题讨论】：

标签： jsf richfaces jsf-1.2

【解决方案1】：

对于新的 RichFaces 4.x，您可以改用 a4j:commandLink this，并在 CSS 中使整行可选。请注意，'rowClasses="clickable"' 指的是 CSS 类以选择整行：

<rich:column id="fileName" sortable="false" width="618px">
  <a4j:commandLink action="#{controller.setSelectedFile(file)}"
    oncomplete="window.open('#{menuBar.PrintPage}?outputType=pdf', '_blank');"
    rendered="#{not controller.getButtonDisabled(file)}"
    execute="@this" limitRender="true">
  <h:outputText value="${file}" 
    style="text-align:left;width:100%;min-width:400px;"
    title="${file.name} is viewable.">
      <f:converter converterId="MVC.View.Converter_FilePath" />
  </h:outputText>
 </a4j:commandLink>
</rich:column>

使用这个 CSS 类来选择整行：

tr.clickable td {
    padding: 0;
}

tr.clickable td a {
    display: block;
    padding: 4px;
}

【讨论】：

【解决方案2】：

我通过一些样式让整行都可以点击。我使单元格内的链接占据整个单元格，display: block; 为链接，padding:0 为单元格。

所以，这就是你需要做的。在 JSF 页面中，设置rowClasses 和每个单元格中的链接：

<rich:dataTable value="#{myMB.listaElems}" var="elem" rowClasses="clickable">
    <rich:column>
        <h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item1}" />
    </rich:column>
    <rich:column>
        <h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item2}" />
    </rich:column>
</rich:datatable>

在 CSS 表中：

tr.clickable td {
    padding: 0;
}
tr.clickable td a {
    display: block;
    padding: 4px;
}

就是这样！

唯一的缺点是您需要在每个单元格中重复链接，但 HTTP 流程仍然很简单，您不需要更改任何组件，它适用于 h:links 或旧的 <a> html 链接——我会说，这是一个可以接受的折衷方案。 :)

【讨论】：

【解决方案3】：

基本问题是 JSF（核心）与 HTML table 元素绑定，以便通过 dataTable 组件呈现查询结果。由于 JSF dataTable 呈现为 HTML table，因此结果仅限于可以在列中管理的内容（没有我见过的开箱即用的行控件）。执行此操作的 HTML/CSS 方法非常优雅，但为了在 JSF 中完成此操作，我相信 dataTable 的 UIComponent 渲染器需要被覆盖才能输出：

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

用CSS样式tablerow和cell代表display:table,display:table-row和display:table-cell；分别。这使得该行完全可点击，但它表现为一个适当的表格。我还没有着手重新编写 JSF 渲染器并解决 JSF commandLink 和其他组件问题来完成上述渲染，但这可能是最终的答案。在与 JSF 进行了一些项目之后，我现在不再是它的粉丝（与来自基本 HTML/CSS、少量 JavaScript、干净的 Java/Servlet 等的轻量级概念组合相比）。

【讨论】：

确实，这就是如何生成我想要的行为所需的语义 HTML。但是，对于 JSF 解决方案，我认为我所做的 CSS 样式确实是最好的选择。我对 JSF 的挫败感表示同情，我实际上已经继续前进，现在是一个快乐的 Grails 用户。 :)

【解决方案4】：

您可能想试试rich:scrollableDataTable。它具有onRowClick 属性，您可以将其指定为event 属性到嵌套在表中的a4j:support / a4j:ajax。这将使您的行可点击。

-干杯:)

【讨论】：

其实rich:dataTable也有onRowClick。但我想不使用 AJAX，以简化流程。我用链接和单元格的一些样式解决了我的问题......无论如何，谢谢！ :)

【解决方案5】：

在你的数据表中使用这个：

<a4j:jsFunction name="selectRow" action="#{userBean.myListener" ...>
  <a4j:param name="currentRow" assignTo="#{userBean.selectedRowId}"/>
</a4j:jsFunction>

当您选择一行时调用它，您可以做任何您想做的事情并使用<a4j:param 传递选定的行...作为一个选项您也应该能够调用yourLink.click() 或类似的东西，但是找出来不会是问题...

参考：Richfaces Forum

【讨论】：

hmm... 但那将是一个 AJAX 请求，它只会重新渲染一些元素，对吧？我一直在寻找可以像普通按钮一样工作的东西......那么我想这是不可能的。
你打算用它做什么？
我只是想要整个数据表行的 commandLink 行为。也许用 CSS 让链接区域占据整个单元格...... - 我正在使用 JBoss-EL，顺便说一句，所以我可以做 action="#{userBean.doSomething(variable)}"。
所以只需给链接一个 id 并调用 yourLink.click() 或 sth。
嘿，伙计！我最终解决了我的问题（使整行可点击）只是设置链接以占据表格单元格的整个空间。感谢您的帮助！