p:dataTable:单击嵌入内容时触发rowSelect事件(图像)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了p:dataTable:单击嵌入内容时触发rowSelect事件(图像)相关的知识,希望对你有一定的参考价值。
在下面的示例中,如果单击一行,则会触发rowSelect-event,但如果单击该行中的图像则不会触发。
我明白为什么会发生这种情况,但我想知道是否还有一些优雅的方式来包含子组件(也可能是嵌套的子组件)?
<h:form id="form">
<p:growl id="growl" showDetail="true" />
<p:dataTable id="cars" var="car" value="#{tableBean.cars}" rows="5"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
update=":form" />
<p:column headerText="Model">
<p:graphicImage value="myImage.png"
style="width: 40px; height: 40px;" />
</p:column>
</p:dataTable>
</h:form>
答案
您可以尝试在图像上添加onclick事件:
<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...
... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"
另一答案
如果嵌入的内容是一个始终显示在列中的图像(如下图所示),并且您希望图像不干扰行选择,则可以执行以下操作:
<p:column styleClass="my_icon">
并创建css类:
.my_icon {
background-image: url("myicon.png");
background-repeat: no-repeat;
background-position: center;
}
你会得到这样的东西:
另一答案
只需添加css即可嵌入img标签:
table tbody td img {pointer-events:none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
以上是关于p:dataTable:单击嵌入内容时触发rowSelect事件(图像)的主要内容,如果未能解决你的问题,请参考以下文章
单击按钮时,如何触发 jquery datatables fnServerData 通过 AJAX 更新表?