如何在 Rich:datatable 中制作可点击的行? [英] How to make a clickable row in a rich:datatable?

问题描述

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

I have a JSF page with a rich:dataTable where, in each row, I put h:commandLinks to lead to pages with the details of the row selected.

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

I wanted to make the whole row clickable, calling the action method when the user clicks anywhere in the row.

如果没有 JavaScript，这可能吗?如果 JavaScript 是唯一的出路，那么最好的方法是什么?搜索命令链接并单击"它?

Is that possible without JavaScript? And if JavaScript is the only way out, what would be the best way do it? Search for a commandLink and "click" it?

提前致谢！

推荐答案

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

I got the whole rows clickable with a bit of styling. I made the links inside the cells occupy the whole cell with display: block; for the links and padding:0 for the cell.

所以，这是您需要做的.在 JSF 页面中，设置 rowClasses 和每个单元格中的链接:

So, here is what you need to do. In the JSF page, set up rowClasses and the links in each cell:

<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 链接——我会说这是一个相当可以接受的权衡.:)

The only downside is that you need to repeat the link in each cell, but the HTTP flow remains simple, you don't need to change any component, and it will work for h:links or good old <a> html links -- a pretty acceptable tradeoff, I'd say. :)

这篇关于如何在 Rich:datatable 中制作可点击的行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！