带有html文本的Primefaces数据表行不调用选择事件答案

【问题标题】：Primefaces datatable row with html text does not call select event带有html文本的Primefaces数据表行不调用选择事件
【发布时间】：2012-05-24 11:11:09
【问题描述】：

我正在尝试在数据表行中显示从服务器接收到的 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> 之前添加粗体标记，即
<b><h:outputText value="#{car.ad}"/></b>，即使这样，只有当我单击行中的任意位置时才会调用 select 事件，而是在文本上。
有人能告诉我如何处理吗？

【问题讨论】：

标签： datatable primefaces

【解决方案1】：

这是因为当您选择不转义 outpuText 的值时，它实际上会呈现对应的 div 标记内的 html 元素。当您单击文本本身时，您实际上是在单击粗体和下划线 HTML 元素，并且 jQuery click 事件未注册到表格行。

此点击事件绑定到 ui-dt-c 类的元素，因此如果您使用具有此类的 div 将文本包装在 html 元素中，那么点击文本将触发点击事件。

<b><u><div class="ui-dt-c"> e78fe894 Ferrari Blue 1994 </div></u></b>

【讨论】：

感谢分享。一段时间以来一直在努力寻找解决方案。

【解决方案2】：

这种情况对我来说也很神奇，但不幸的是，建议的解决方案对我不起作用。最后，我找到了非常简单但有效的解决方案。

instead of using <b> tag I have used <span> tag like this:

<span style="font-weight:bold">hello</span>

即使我点击列中的“hello”字样，行选择也会再次起作用。

【讨论】：