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 rowcell表示display:table,display:table-rowdisplay: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 回答