java - 将行组件动态添加到 JSF 2 dataTable

Question

我有一个数据表，其中每一行代表一个拍卖项目，每个项目旁边都有一个出价按钮。当用户单击该按钮时，我需要显示一个带有输入文本的小出价组件，以及一个提交出价的按钮。此“出价”组件需要位于用户出价的拍卖品下方。

对于常规 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> 内组件，它确实出现在您的项目行的正下方。