使用primefaces数据表上的侦听器执行行单击

Question

问题很严重。我创建了p:datatable，但在p:column内我实际上有一个div元素。不幸的是，数据表应该有可选行，而div只是不合作;）。 所以解决方法是手动调用它，在div元素上有onclick监听器，但是我应该如何调用datatable的rowSelection？是否有一些Primefaces元素的功能列表？

代码：

<p:dataTable var="user" value="#{rec.friends}" rowKey="#{user.id}" widgetVar="friendscrollist"
        rendered="#{not empty rec.friends}" scrollable="true" rowIndexVar="findex"
        scrollHeight="500" scrollWidth="220" selectionMode="single" selection="#{rec.chosenFriend}" styleClass="friendscroll">
                <p:column width="198" id="friend#{findex}">
    <div class="friendlist" onclick="friendscrollist.clickRow(#{findex})" />
                </p:column>
                <p:ajax update=":leftform" event="rowSelect" />
                <p:ajax update=":leftform" event="rowUnselect" />
</p:dataTable>

当然它是一个简化版本，只有您需要的东西。所以问题是在 div onclick?

中调用什么

Answer 1

<p:dataTable widgetVar>具有unselectAllRows()和selectRow(index)功能，这正是您所需要的。

<div onclick="friendscrollist.unselectAllRows(); friendscrollist.selectRow(#{findex})">

遗憾的是，这些功能没有可用的文档，但在Chrome / Firebug中，当您在JS控制台中输入friendscrollist.时，您可以在自动完成列表中看到所有可用功能的列表。以下是Chrome屏幕：

查看基于函数名称的JS源代码或常识应告诉/提示您这些函数的作用。

---

更新：我已经纠正了，其中一些功能实际记录在PrimeFaces 3.4 User's Guide中。它们位于第3.26章“DataTable”的“客户端API”部分，第146页。

Answer 2

接受的解决方案适用于单个选择表，但不适用于多个选择。另一种解决此问题的方法是使用以下方法而不是<div>

<h:panelGroup layout="block">

这将在您的列中呈现<div>，并且不会干扰onclick事件处理。

Answer 3

对于分页，您可以通过以下方式控制每页的行数：

friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * friendscrollist.paginator.cfg.rows);

Answer 4

我想为右键或上下文菜单中遇到类似问题的每个人添加其他信息。如果您使用<p:graphicimage>，则无法捕获右键单击事件。不知何故，on {<img>标记的oncontextmenu事件在primefaces中被删除。

如果要通过右键单击行内的图像内容来选择行，则应使用tag和oncontextmenu事件。

<img src="..." oncontextmenu="dataTable.unselectAllRows();dataTable.selectRow(#{rowIndex});"/> 

Answer 5

如果启用了分页，您可以执行以下操作：

onmouseup="friendscrollist.unselectAllRows();friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * 15);"

当15是表格中的行数时。

我没有找到以编程方式获取行数的方法......