在primefaces数据表上使用监听器执行行点击答案

【问题标题】：Execute row click using listener on primefaces datatable在primefaces数据表上使用监听器执行行点击
【发布时间】：2012-12-27 00:39:05
【问题描述】：

问题很短。我创建了一个p:datatable，但在p:column 中我实际上有一个div 元素。不幸的是，数据表应该有可选择的行，而 div 不会合作;)。所以解决方法是手动调用，在div元素上有onclick监听器，但是应该如何调用数据表的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?

中调用什么

【问题讨论】：

标签： javascript ajax jsf jsf-2 primefaces

【解决方案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 中。它们位于第 146 页第 3.26 章“数据表”的“客户端 API”部分中。

【讨论】：

再次感谢您！ :) 你不可能！
这不适用于启用分页的数据表。

【解决方案2】：

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

<h:panelGroup layout="block">

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

当 15 是表中的行数时。

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

【讨论】：

【解决方案5】：

对于分页，您可以通过这种方式控制每页问题的行数：

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

【讨论】：

还要注意，你需要在dataTable上设置rowKey，你可以使用.unselectAllRows()取消全选。