DataTableのJSFのテーブルの行の崩壊を拡大

StackOverflow https://stackoverflow.com/questions/2133985

質問

私は、コアJSFを使用して表の行の拡大/縮小のこの機能を実現しようとしているとも私はソートを維持する必要があります。私はこの機能を実現することができますコアJSFでの方法はありますか？

役に立ちましたか？

解決

あなたが唯一のリファレンス実装を使用して主張している場合は、

、その後、あなたはそれがうまく整合し得るために、ネストされたh:dataTableおよび/またはh:panelGroupとCSSのの良いのショットを使用して周りに行くことはできません。その後、表示/非表示の行の詳細をスマートな方法JavaScriptを使用することができます。

ここでは基本的なキックオフの例があります：

<h:dataTable value="#{bean.orders}" var="order">
    <h:column>
        <h:panelGrid columns="3">
            <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" />
            <h:outputText value="#{order.id}" />
            <h:outputText value="#{order.name}" />
        </h:panelGrid>
        <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;">
            <h:column><h:outputText value="#{detail.date}" /></h:column>
            <h:column><h:outputText value="#{detail.description}" /></h:column>
            <h:column><h:outputText value="#{detail.quantity}" /></h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

toggleDetails()機能がどのように見えることができます（それはJSFは、アカウントにクライアントIDを生成とることに注意してください）：

function toggleDetails(image) {
    var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':details';
    var details = document.getElementById(detailsId);
    if (details.style.display == 'none') {
        details.style.display = 'block';
        image.src = 'collapse.gif';
    } else {
        details.style.display = 'none';
        image.src = 'expand.gif';
    }
}

他のヒント

私は、あなたが「コア」JSF（私はあなたが唯一のリファレンス実装を使用することを意味想定していることで）。

でこれを行うことができるとは思いません 私はそれを理解し、あなたはRichFacesの持つサブテーブルを<達成することができるのhref = "http://docs.jboss.org/richfaces/3.3.2.GA/en/tlddoc/rich/subTable.html" のrel =」 nofollowをnoreferrer ">サブテーブルの

また、ICEfacesをして同様のことを行うことができます - コンポーネントショーケースを参照してください（それは表の下にある - >拡張表）。しかし、どちらかのこれらのは、あなたが望むものはおそらくないです（RichFacesのか、ICEfacesを）を追加し、別のライブラリを設定する必要になります。

RichFacesの

と

シンプルな拡張可能なテーブル

私たちは、RichFacesの持つシンプルな拡張可能なテーブルを行うことができます そしてコードは...

以下に示します。 
<h:form>
   <rich:dataTable value="#{wonderBean.wonders}" var="wonder">
      <rich:column colspan="3">
         <f:facet name="header">Wonder</f:facet>
     <h:outputText value="#{wonder.name}" />
     <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
        reRender="link">
     <a4j:actionparam name="val" value="#{!wonderBean.show}"
        assignTo="#{wonderBean.show}" />
     </a4j:commandLink>
      </rich:column>
      <rich:columnGroup>
         <rich:column>
        <a4j:outputPanel ajaxRendered="true">
             <rich:dataTable value="#{wonder.details}" var="detail"
            rendered="#{wonderBean.show}" style="border: 0px">
                <rich:column>
            <f:facet name="header">Location</f:facet>
            <h:outputText value="#{detail.location}" />
            </rich:column>
            <rich:column>
               <f:facet name="header">Image</f:facet>
               <h:graphicImage value="#{detail.imageUrl}" />
            </rich:column>
         </rich:dataTable>
          </a4j:outputPanel>
       </rich:column>
        </rich:columnGroup>
     </rich:dataTable>
</h:form>
所属していません StackOverflow
scroll top