1

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

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

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

提前致谢！

4

5 回答 5

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 链接——这是一个相当可接受的折衷方案，我会说。:)

于 2011-12-08T19:37:34.687 回答
1

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

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

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

于 2013-02-12T15:40:07.827 回答
0

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

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

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

参考：Richfaces 论坛

于 2011-12-08T12:19:32.937 回答
0

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

-干杯:)

于 2011-12-09T01:00:23.527 回答
0

对于新的 RichFaces 4.x，您可以改用a4j:commandLinkthis，并在 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;
}
于 2016-08-17T19:07:40.557 回答