將行組件動態添加到JSF 2 dataTable

Question

我有一個dataTable，其中每一行代表一個拍賣項目，並且每個項目旁邊都有一個Bid按鈕。 當用戶單擊按鈕時，我需要顯示一個帶有輸入文本的小投標組件，以及一個用於提交投標的按鈕。 該“出價”組件必須位於用戶要出價的拍賣項下。

使用常規HTML，這很簡單：只需在拍賣項目行下有條件地顯示另一行即可。 我知道該怎么做。

但是dataTable基於列，因此我需要動態地呈現的不是行，而是行（colspan等於此dataTable中的列數）。

（我不確定這是否足夠清楚，所以我將嘗試用其他方式說出來：動態插入的行沒有其他拍賣品。它有幾個其他小部件。）

有沒有辦法做到這一點？

Answer 1

我認為僅憑原始JSF的標簽就無法實現所需的功能。 實際上，您可能很難自行開發此類復合組件。

幸運的是，如果您看一下PrimeFaces的<p:dataTable> ，將會看到一個名為ExpandableRows的功能。 您的表應如下所示：

<h:form>  
    <p:dataTable var="item" value="#{mrBean.itemsToBid}">  

        <f:facet name="header">  
             Items for Bidding  
        </f:facet>  

        <p:column style="width:16px">  
            <p:rowToggler />  
        </p:column>  

        <p:column headerText="Name" >
            #{item.name}
        </p:column>  

        <p:column headerText="Condition" >  
            #{item.condition} 
        </p:column>  

        <p:rowExpansion>  

            <h:panelGrid id="display" columns="2" > 
                <h:outputText value="Your bid:" />  
                <h:inputText  value="#{mrBean.bidAmount}" />  

                <h:commandButton actionListener="#{mrBean.bid(item)}" value="Bid"/>  
            </h:panelGrid>  

        </p:rowExpansion>  
    </p:dataTable>  
</h:form>  

您的出價表單位於<p:rowExpansion>組件內部，並且確實顯示在項目行的下方。