Question

我正在为我的问题寻找解决方案。

我有一张桌子需要像这样。

--------------------------------------------------------------|
        |       |                   Title 3                   |
Title 1 |Title 2|---------------------------------------------|
        |       | SubTitle 1 |SubTitle 2|SubTitle 3|SubTitle 4|
--------------------------------------------------------------|
        |       |            |          |          |          |
Val A1  | ValB1 |    ValC1   |   ValC1  |   ValC1  |  ValC1   |
        |       |            |          |          |          |
        |-------|------------|----------|----------|----------|
        |       |            |          |          |          |
        | ValB2 |    ValC2   |   ValC2  |   ValC2  |  ValC2   |
        |       |            |          |          |          |
--------------------------------------------------------------|
        |       |            |          |          |          |
        |       |            |          |          |          |
Val A2  | ValB3 |    ValC3   |   ValC3  |   ValC3  |  ValC3   |
        |       |            |          |          |          |
        |       |            |          |          |          |
----------------------------------------------------------------

我的目标是使表格看起来像我上面那样。

我正在使用JSF和Primefaces 4.0。

我有这种阶级的结构。

Class Master {

  private List<ClassA> classesA

  // getter and setter

}


Class A {

      private List<ClassB> classesB

      // getter and setter and fields

}


Class B {

      private List<ClassC> classesC

      // getter and setter and fields

}


Class C {

  // getter and setter and fields

}

所以我尝试使用两个datatables或使用ui:repeat，但我不知道哪个是最佳选择。拥有这样的头衔。

Class A有title 1，Class B有title 2，Class C有title 3和subtitle 1,2,3 and 4.

或使用binding。

为了更容易理解，我画了一张关于如何创建表格的图片。

enter image description here

有人可以帮助我吗？

由于

Answer 1

如果您确定对象结构将来不会发生变化，那么简单的解决方案就是使用嵌套表，rowspan和colspan重复ui：repeat。但是如果对象结构经常变化并且您需要多次执行它，那么请转到自定义组件。如果您需要olap功能，那么我建议您使用pivot4j或类似的东西。

更新：查看下面的xhtml，它会创建表格的正文。

<table border="4" cellspacing="4" cellpadding="10">
        <tr>
            <th rowspan="2">A</th>
            <th rowspan="2">B</th>
            <th colspan="4">C</th>
        </tr>
        <tr>
            <th>p1</th>
            <th>p2</th>
            <th>p3</th>
            <th>p4</th>
        </tr>
        <ui:repeat var="classa" value="#{master.classesA}" varStatus="astat">
            <ui:repeat var="classb" value="#{classa.classesB}"  varStatus="bstat">
                <ui:repeat value="#{classb.classesC}" var="classc" varStatus="cstat">

                    <tr>
                        <h:panelGroup rendered="#{bstat.index eq 0 and cstat.index eq 0}">
                            <td rowspan="#{classa.colSpan}" >
                                <h:outputText value="#{classa.property}" />
                            </td>
                        </h:panelGroup>
                        <h:panelGroup rendered="#{cstat.index eq 0}">
                            <td rowspan="#{classb.classesC.size()}">                                                   
                                <h:outputText value="#{classb.property}" />
                            </td>
                        </h:panelGroup>

                        <td>
                            <h:outputText value="#{classc.prop1}" />
                        </td>
                        <td>
                            <h:outputText value="#{classc.prop2}" />
                        </td>
                        <td>
                            <h:outputText value="#{classc.prop3}" />
                        </td>
                        <td>
                            <h:outputText value="#{classc.prop4}" />
                        </td>
                    </tr>  
                </ui:repeat>

            </ui:repeat>

        </ui:repeat>
    </table>

和类看起来应该是这样的

 public class A {
    private List<B> classesB;
    private String property;

    public List<B> getClassesB() {
        return classesB;
    }

    public void setClassesB(List<B> classesB) {
        this.classesB = classesB;
    }

    public A(String pro) {
    classesB= new ArrayList<B>();
    property=pro;
    }

    public void addClassB(B b){
        classesB.add(b);
    }

    public String getProperty() {
        return property;
    }

    public void setProperty(String property) {
        this.property = property;
    }

    public int getColSpan(){
        int size=0;
        for(B b : classesB){
            size+=b.getClassesC().size();
        }
        return size;
    }

}

public class B {
    private List<C> classesC;
    private String property;

    public B(String pro) {
        this.classesC = new ArrayList<C>();
        this.property=pro;
    }



    public List<C> getClassesC() {
        return classesC;
    }

    public void setClassesC(List<C> classesC) {
        this.classesC = classesC;
    }


    public void addClassC(C c){
        classesC.add(c);
    }

    public String getProperty() {
        return property;
    }

    public void setProperty(String property) {
        this.property = property;
    }


}
public class C {
    private String prop1;
    private String prop2;
    private String prop3;
    private String prop4;

    public C(String prop1, String prop2, String prop3, String prop4) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
        this.prop4 = prop4;
    }

    public void setProp1(String prop1) {
        this.prop1 = prop1;
    }

    public void setProp2(String prop2) {
        this.prop2 = prop2;
    }

    public void setProp3(String prop3) {
        this.prop3 = prop3;
    }

    public void setProp4(String prop4) {
        this.prop4 = prop4;
    }

    public String getProp1() {
        return prop1;
    }

    public String getProp2() {
        return prop2;
    }

    public String getProp3() {
        return prop3;
    }

    public String getProp4() {
        return prop4;
    }


}

在Master类中测试数据。

private List<A> classesA;

@PostConstruct
public void init() {
    classesA = new ArrayList<A>();
    A a1 = new A("a1");
    A a2 = new A("a2");
    classesA.add(a1);
    classesA.add(a2);

    B b11 = new B("b11");
    B b12 = new B("b12");
    B b21 = new B("b21");

    a1.addClassB(b11);
    a1.addClassB(b12);
    a2.addClassB(b21);

    C c111 = new C("a", "b", "c", "d");
    C c112 = new C("d", "e", "f", "g");
    C c121 = new C("g", "h", "i", "j");
    C c211 = new C("k", "l", "m", "n");
    C c212 = new C("o", "p", null, null);

    b11.addClassC(c111);
    b11.addClassC(c112);
    b12.addClassC(c121);
    b21.addClassC(c211);
    b21.addClassC(c212);
}

public List<A> getClassesA() {
    return classesA;
}

public void setClassesA(List<A> classesA) {
    this.classesA = classesA;
}

Answer 2

您可以将dataTable与subTable一起使用（如果需要，您可以在行中添加列。）

使用嵌套集合填充表

2 个答案: