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>组件内，并且显示在您的项目行下方。

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

1 个答案: