如何将Subrows放在PrimeFaces v3.5中的dataTable中

时间:2013-04-28 10:56:59

标签: jsf-2 primefaces

我只想在我的p:dataTable中添加一些子行。我有一份可供任何人购买的汽车清单。我想在数据表中显示这个。其中第一行包含有关汽车的信息,下一行包含有关买方的信息。每辆车都会重复这种模式。

下面是我的car bean,它有一个买家阵列(这里省略了Getters和setter) -

public class Car {    
    private int id;
    private String name;
    private String model;
    private Buyer[] buyer;
}

买方bean看起来如下 -

public final class Buyer {
    private int id;
    private String name;
    private String address;
}

下面是控制器,其中包含汽车列表 -

@ManagedBean
@ViewScoped
public class Seller implements Serializable{
    private List<Car> list;
}

根据丹尼尔的建议,我以这种方式实施了它 -

    <p:panel>
        <h:form>
            <p:dataTable id="dataTable" var="car" value="#{seller.list}">
                <p:column style="width:4%">  
                    <p:rowToggler />  
                </p:column> 
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Id
                    </f:facet>  
                    <h:outputText value="#{car.id}" />  
                </p:column>  
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Name
                    </f:facet>  
                    <h:outputText value="#{car.name}" />  
                </p:column>  
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Model
                    </f:facet>  
                    <h:outputText value="#{car.model}" />  
                </p:column>
                <p:rowExpansion>  
                    <p:dataTable var="buyer" value="#{car.buyer}">  
                        <p:column headerText="Id">  
                            <h:outputText value="#{buyer.id}" />  
                        </p:column>  
                        <p:column headerText="Name">  
                            <h:outputText value="#{buyer.name}" />  
                        </p:column>  
                        <p:column headerText="Address">  
                            <h:outputText value="#{buyer.address}" />  
                        </p:column>  
                    </p:dataTable>  
                </p:rowExpansion>
            </p:dataTable>  
        </h:form>
    </p:panel>

1 个答案:

答案 0 :(得分:1)

查看展示DataTable - RowExpansion

至于扩大所有......一种方式可能是:

包含一些js文件,包含以下代码

$(document).ready(function () { 
    $(".ui-row-toggler").click(); 
}); 

或将其包含在您的xhtml页面

<h:outputScript target="head">
    $(document).ready(function () { $(".ui-row-toggler").click(); });
</h:outputScript>

可能还有其他更多的原生api用法来扩展行(但我不熟悉那些)