p:dataTable：点击嵌入内容（图片）时触发行选择事件

Question

在下面的示例中，如果我点击一行，则将触发rowSelect事件，但如果单击行中的图像，则不会触发该事件。

我理解为什么会这样，但我想知道是否有一种优雅的方法也包括子组件（可能还包括嵌套的子组件）？

<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>

- Aksel Willgert

---

相关：https://dev59.com/H23Xa4cB1Zd3GeqPbSER - BalusC

Answer 1

您可以尝试在图像上添加一个onclick事件：

<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...

... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"

- Samuel

Answer 2

如果嵌入的内容是图像，它将始终显示在列中（如下图所示），并且您希望图像不会干扰行选择，则可以执行以下操作：

<p:column styleClass="my_icon">

并创建CSS类：

.my_icon {
   background-image: url("myicon.png");
   background-repeat: no-repeat;
   background-position: center;
}

你会得到类似这样的东西：

- Cristian Arteaga

Answer 3

只需将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;

}

- Jerry Chan