javascript 使用primefaces数据表上的侦听器执行行单击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14294968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute row click using listener on primefaces datatable
提问by Atais
Problem is short. I have created a p:datatablebut within the p:columni actually have a divelement. Unfortunately the datatable should have selectable rows and the div just won't cooperate ;).
So the solution is to call it manually, on the div element there is onclick listener, but how should I call the rowSelection of the datatable? Is there some list of the functions of Primefaces' elements?
问题很短。我创建了一个p:datatable但在p:column我实际上有一个div元素。不幸的是，数据表应该有可选择的行，而 div 不会合作；)。所以解决办法是手动调用，在div元素上有onclick监听器，但是我该如何调用datatable的rowSelection呢？是否有一些 Primefaces 元素的功能列表？
the code:
代码：
<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>
Of course it is a simplified version, only things u need. So the question is what to call in the div onclick?
当然它是一个简化版本，只有你需要的东西。所以问题是在div onclick?
回答by BalusC
the <p:dataTable widgetVar>has unselectAllRows()and selectRow(index)functions which are exactly what you need.
在<p:dataTable widgetVar>具有unselectAllRows()和selectRow(index)功能，这些功能正是你需要的。
<div onclick="friendscrollist.unselectAllRows(); friendscrollist.selectRow(#{findex})">
There's unfortunately no documentation available for those functions, but in Chrome/Firebug you can see a list of all available functions in autocomplete list when you enter friendscrollist.in JS console. Below is a screen from Chrome:
遗憾的是，这些功能没有可用的文档，但是在 Chrome/Firebug 中，当您friendscrollist.在 JS 控制台中输入时，您可以在自动完成列表中看到所有可用功能的列表。以下是 Chrome 的屏幕：
Looking in the JS source code or common sense based on the function name should tell/hint you what those functions do.
根据函数名称查看 JS 源代码或常识应该会告诉/提示您这些函数的作用。
Update: I stand corrected, a few of those functions are actually documented in PrimeFaces 3.4 User's Guide. They're in the "Client Side API" section of chapter 3.26 "DataTable", on page 146.
更新：我更正了，其中一些功能实际上记录在PrimeFaces 3.4 用户指南中。它们位于第 146 页的第 3.26 章“数据表”的“客户端 API”部分。
回答by Geoff Longo
The accepted solution will work for a single selection table, but won't work for multiple selection. Another way to solve this problem that should work for both is to use the following instead of <div>
已接受的解决方案适用于单个选择表，但不适用于多项选择。解决这个问题的另一种方法应该对两者都有效是使用以下而不是<div>
<h:panelGroup layout="block">
That will render a <div>inside your column, and will not interfere with the onclick event processing.
这将<div>在您的列内呈现 a ，并且不会干扰 onclick 事件处理。
回答by Miguel ángel Moreno
For pagination, you can control rows per page issue by this way:
对于分页，您可以通过这种方式控制每页问题的行数：
friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * friendscrollist.paginator.cfg.rows);
回答by Mehmet Aktas
I want to add another information for everybody who faces a similar issue with right click or context menu. You cannot capture right click event if you are using <p:graphicimage>. Somehow, oncontextmenu event of <img>tag is removed in primefaces.
我想为每个遇到类似问题的人添加另一个信息，右键单击或上下文菜单。如果您使用的是<p:graphicimage>. 不知何故，<img>在primefaces 中删除了标记的oncontextmenu事件。
If you want to select the row by right clicking an image content inside a row, you should use tag and oncontextmenu event.
如果要通过右键单击行内的图像内容来选择行，则应使用 tag 和 oncontextmenu 事件。
<img src="..." oncontextmenu="dataTable.unselectAllRows();dataTable.selectRow(#{rowIndex});"/>
回答by user1127860
If pagination is enabled you can do something like this:
如果启用分页，您可以执行以下操作：
onmouseup="friendscrollist.unselectAllRows();friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * 15);"
When 15 is the number of rows in your Table.
当 15 是表中的行数时。
I didn't found a way to get the number of rows programatically...
我没有找到以编程方式获取行数的方法...
