0

以下のコード ( PrimeFaces ShowCase から取得)<h:outputText value="#{car.id}" />を考えると、2 番目の列のテキストが(画像ではなく) 行を展開/縮小するためのリンクとして機能するように機能を変更する最良の方法は何<p:rowToggler>ですか?

これがどれほど簡単か、またはそうあるべきかはわかりませんが、私は PrimeFaces にかなり慣れていないため、これをどのように行うことができるかわかりません。私はドキュメントとPrimeFaces ShowCase を調べました) (そして同様のコードで数時間遊んでみました) が、それを成し遂げることができませんでした。

ショーケース コード:

<h:form>
    <p:dataTable var="car" value="#{dtBasicView.cars}">
        <f:facet name="header">
            Expand rows to see detailed information
        </f:facet>
        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />  <!-- This text needs to be a link that expands the row -->
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:rowExpansion>
            <p:panelGrid  columns="2" columnClasses="label,value" style="width:300px">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{car.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{car.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{car.price}" />
            </p:panelGrid>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

編集- シンプルなソリューションを見つけましたが、それが最もエレガントかどうかはわかりません。これを使用しない理由はありますか？

<p:column style="display:none !important">
    <p:rowToggler />
</p:column>
<p:column>
    <h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
4

2 に答える 2

1

それを行う簡単な方法があります。div にリンクを作成し、rowToggler html ソースから取得できる「ui-row-toggler」で div のクラスを変更します。例えば

<div class="ui-row-toggler"><a href="##" class="ui-row-toggler">Test</a></div>

これができる理由は、primefaces 行トグルの html ソースを確認すると、

<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>

したがって、内部にリンクがあるカスタマイズされた div に同じクラスを配置するだけです。

于 2015-02-03T16:38:23.727 に答える
1

<p:rowToggler />デフォルトの PrimeFaces 構成では、 aを切り替える以外に何も許可されていません<p:rowExpansion>。

1 つの解決策は、いくつかのカスタム JS 関数を使用して、生成された HTML 要素の CSS クラスを追加/削除することです。

他の解決策は、http: //forum.primefaces.org/viewtopic.php?f=3&t=11308&p=55114#p55114にあります。ニーズに合わせて PrimeFaces ソースを変更することです。

于 2014-10-24T09:58:38.850 に答える