我有一个 JSF 页面,rich:dataTable
其中在每一行中,我将h:commandLink
s 放入带有所选行详细信息的页面。
我想让整行可点击,当用户点击行中的任意位置时调用 action 方法。
没有 JavaScript 有可能吗?如果 JavaScript 是唯一的出路,那么最好的方法是什么?搜索 commandLink 并“单击”它?
提前致谢!
我通过一些样式使整行可点击。我使单元格内的链接占据了整个单元格,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
s 或旧的<a>
html 链接——这是一个相当可接受的折衷方案,我会说。:)
基本问题是 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 等的轻量级概念组合相比)。
在你的数据表中使用这个:
<a4j:jsFunction name="selectRow" action="#{userBean.myListener" ...>
<a4j:param name="currentRow" assignTo="#{userBean.selectedRowId}"/>
</a4j:jsFunction>
当您选择一行时,它会被调用,您可以做任何您想做的事情并使用 ...作为选项传递所选行,<a4j:param
您也应该可以调用yourLink.click()
或类似的东西,但这不会是找出问题.. .
参考:Richfaces 论坛
你可能想试试rich:scrollableDataTable
。它具有属性onRowClick
,您可以将其指定为嵌套在表中的event
属性。a4j:support / a4j:ajax
这将使您的行可点击。
-干杯:)
对于新的 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;
}