[英]force row selection in PrimeFaces datatable
I got ap:dataTable which contains 我得到ap:dataTable其中包含
<p:dataTable id="dataTable" widgetVar="dataTableCar" var="category"
value="#{CategoryBean.categories}" selection="#{CategoryBean.selectedCategory}"
selectionMode="single" rowKey="#{category}"
<p:column headerText="name">
<h:outputText value="#{category.name}" />
</p:column>
<p:column headerText="parent">
<p:autoComplete id="parentCategory" completeMethod="#{CategoryBean.categories}" maxResults="20" value="#{category.parent}" var="p" itemLabel="#{p.name}"
itemValue="#{p}" converter="#{categoryStringConverter}"
forceSelection="true">
<p:ajax event="itemSelect"
listener="#{CategoryBean.oncategorySelect}" />
</p:autoComplete>
</p:column>
I need to force a row selection in case the user clicks into the autocomplete. 我需要强制选择行,以防用户单击自动完成功能。 Maybe I should mention if the user clicks into a ui control (in this example it is the autocomplete) which is hosted by the p:column, there will be no row selected.
也许我应该提一下,如果用户单击进入p:column托管的ui控件(在此示例中为自动完成),则不会选择任何行。
Is there a way to implement this? 有办法实现吗? If I don't get the selected row, I can't process the parent category.
如果没有得到所选行,则无法处理父类别。
You can Do this by 2 ways, both Include Jquery. 您可以通过两种方式做到这一点,都包括jQuery。
I will use the following p:dataTable
code to show both the ways. 我将使用下面的
p:dataTable
代码来展示这两种方式。
I'm using h:inputText
instead of p:autoComplete
. 我正在使用
h:inputText
而不是p:autoComplete
。
<p:dataTable value="#{userManagedBean.userList}" var="user"
selection="#{userManagedBean.selectedUser}" selectionMode="single"
rowKey="#{user.email}" widgetVar="dataTableWidget">
<p:ajax event="rowSelect"/>
<p:column headerText="Email">
#{user.email}
</p:column>
<p:column headerText="Name">
<h:inputText value="#{user.name}" onclick="myFunction(this);"/>
</p:column>
</p:dataTable>
First Way: 第一种方式:
When ever user clicks on the Autocomplete simulate the click event on its parent, in this case its <td>
, so which in turn selects its parent <tr>
and finally your Row will get selected. 当用户单击“自动完成”时,在其父级(在本例中为
<td>
上模拟click事件,从而依次选择其父级<tr>
,最后将选择“行”。
<script type="text/javascript">
function myFunction(ele){
var tdEle = $(ele).parent();
$(tdEle).click();
}
</script>
Second Way 第二路
This by using the Primefaces client side API function selectRow(r,flag)
, which will be called on p:dataTable
's widgetWar
object. 通过使用Primefaces客户端API函数
selectRow(r,flag)
,它将在p:dataTable
的widgetWar
对象上调用。
Here selectRow(r,flag)
will take 2 paramenters: 在这里,
selectRow(r,flag)
将使用2个参数:
r
is Jquery Row element () of the row which needs to be selected. r
是需要选择的行的Jquery Row元素()。 flag
is Boolean which specifies ajax select or not. flag
是布尔值,它指定是否选择ajax。 so now My Javascript function for this would be: 所以现在我的Javascript函数是:
<script type="text/javascript">
function myFunction(ele){
var tdEle = $(ele).parent();
var trEle = $(tdEle).parent();
dataTableWidget.selectRow($(trEle),true);
}
</script>
You can do this with 你可以用
for example : In your datatble with primefaces you have the "onChange" in one of the columns 例如:在带有质数的数据表中,其中一列中包含“ onChange”
value="#{r.visualizaUnicoTodo}" styleClass="chk-nty pd" onchange="check_edit(this)">
value =“#{r.visualizaUnicoTodo}” styleClass =“ chk-nty pd” onchange =“ check_edit(this)”>
To select the current item clicked 要选择当前单击的项目
var check_edit = function (id) {
console.info("Id Elemento Checkeado :" + id);
console.info("Verificar si esta seleccionado : : " + $(id).is(':checked'));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.