1

サーバーから受信した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>


Nowのテーブルでescape="true" ここに画像の説明を入力してください
は、行の任意の場所をクリックすると、rowSelectイベントが発生し、ダイアログボックスが開きます。
ただしescape="false"、行のテキストが太字で下線が引かれるよう に設定した場合ここに画像の説明を入力してください
は、テキストの後に空白の領域をクリックしたときにのみ、rowSelectイベントが発生します。テキストのどこかをクリックしても何も起こりません。 ieの
前に太字のタグを追加しただけでも、行のどこかをクリックした場合にのみ、テキスト上でselectイベントが呼び出されます。 誰かがこれを処理する方法を教えてもらえますか？<h:outputText>
<b><h:outputText value="#{car.ad}"/></b>

4

2 に答える 2

3

これは、outpuTextの値をエスケープしないことを選択すると、対応するdivタグ内のhtml要素が実際にレンダリングされるためです。テキスト自体をクリックしているときは、実際には太字と下線付きのHTML要素をクリックしており、jQueryクリックイベントはテーブルの行に登録されていません。

このクリックイベントはクラスの要素にバインドされているui-dt-cため、html要素内のテキストをこのクラスを持つdivでラップすると、テキストをクリックするとクリックイベントがトリガーされます。

<b><u><div class="ui-dt-c"> e78fe894 Ferrari Blue 1994 </div></u></b>
于 2012-05-24T11:52:05.323 に答える
1

この状況も私にとってはとても魔法のようなものでしたが、提案された解決策は残念ながら私にはうまくいきませんでした。最後に、私は非常に単純ですが実用的な解決策を見つけました。

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

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

列の「hello」という単語をクリックしても、行の選択が再び機能しているのは奇跡です。

于 2014-10-17T21:51:09.623 に答える