[英]Primefaces datatable row with html text does not call select event
我正在尝试在数据表行中显示从服务器收到的html文本。
表单如下所示:
<h:form id="carPageForm" prependId="false">
<p:dataTable var="car" value="#{tableBean.lazyModel}" paginator="true"
rows="10" rowKey="#{car.id}" widgetVar="carsTable"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
selectionMode="single"
selection="#{tableBean.selectedCar}" id="carTable">
<f:facet name="header">
<p:outputPanel>
<p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="float:right"/>
<h:outputText value="Search all fields:" style="float: right; margin-top: 2px;" />
</p:outputPanel>
</f:facet>
<p:ajax event="rowSelect" update=":carPageForm:display"
oncomplete="carDialog.show()" />
<p:column id="idColumn" filterBy="#{car.id}" style="display:none"
filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column id="adColumn" filterBy="#{car.ad}" filterStyle="display:none">
<h:outputText value="#{car.ad}" escape="true"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog"
resizable="false" showEffect="scale" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Title:" />
<h:outputText value="#{tableBean.title}" style="font-weight:bold" />
<h:outputText value="Description:" />
<h:outputText value="#{tableBean.description}"
style="font-weight:bold" />
<h:outputText value="Price:" />
<h:outputText value="#{tableBean.price}" style="font-weight:bold" />
</h:panelGrid>
</p:dialog>
</h:form>
带有escape="true"
的表
现在,如果单击行中的任何位置,将触发rowSelect事件并打开对话框。
但是如果我设置escape="false"
那么行中的文本都是粗体和下划线,如下所示:
然后只有当我在文本后点击空白区域时才会触发rowSelect事件。 如果我点击文本的任何地方,那么没有任何反应。
即使我只是在<h:outputText>
之前添加粗体标记即ie
<b><h:outputText value="#{car.ad}"/></b>
,即使这样,只有当我点击行中的任何地方但是在文本上时,才会调用select事件。
有人可以告诉我如何处理这个?
这是因为当你选择不转义outpuText的值时,它实际上会在相应的div标签中呈现html元素。 当您单击文本本身时,实际上是单击粗体和下划线HTML元素,并且jQuery单击事件未注册到表行。
此单击事件绑定到类ui-dt-c
元素,因此如果使用具有此类的div将文本包装在html元素中,则单击该文本将触发单击事件。
<b><u><div class="ui-dt-c"> e78fe894 Ferrari Blue 1994 </div></u></b>
这种情况对我来说也是如此神奇,但不幸的是,建议的解决方案对我不起作用。 最后我发现了非常简单但有效的解决方案。
instead of using <b> tag I have used <span> tag like this:
<span style="font-weight:bold">hello</span>
并且看起来奇迹,即使我点击列中的“你好”字,行选择也会再次起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.