Question

我有一个带有rich:dataTable的JSF页面，其中，在每行中，我将h:commandLink引导到包含所选行详细信息的页面。

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

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

提前致谢！

Answer 1

我通过一些造型可以点击整行。我让单元格内的链接占据整个单元格，链接为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:link或旧的{ {1}} HTML链接 - 一个非常可接受的权衡，我会说。：）

Answer 2

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

dataTable

CSS样式<div class="table"> <a href="#" class="row"> <span class="cell">Column-1-Value</span> <span class="cell">Column-2-Value</span> </a> ... </div> table和row代表cell，display:table和display:table-row;分别。这使得行完全可以单击，但它表现为正确的表。我没有着手重写JSF渲染器并解决JSF display:table-cell和其他组件问题来完成上面的渲染，但这可能是终极的答案。我现在在一些项目上与它斗争后，我不是JSF的粉丝（与基本HTML / CSS中的轻量级组合概念，一堆JavaScript，干净的Java / Servlet等相比）。

Answer 3

数据表中的

使用这个：

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

当您选择一行时调用它，并且您可以执行任何操作并使用<a4j:param传递所选行...作为选项，您还应该能够调用yourLink.click()或其他内容类似，但这不是问题找出...

参考：Richfaces Forum

Answer 4

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

-cheers：）

Answer 5

对于新的RichFaces 4.x，您可以改为使用a4j:commandLink，并在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;
}

如何在rich：datatable中创建可单击的行？

5 个答案: