如何在primefaces中有多列复选框

Question

我需要使用primefaces数据表来做一个用户权限网格。对于每一行：第一列是类名，第二列是两个子类之一的权限复选框。第三列是另一个子类的权限复选框。第二列和第三列的标题必须具有子类标题加上一个复选框，切换该子类中的所有其他复选框。我想我可以在一个滚动面板中并排使用两个或三个数据表但我在列复选框左侧的列文本排列方面存在问题（它想要在顶部）。
我尝试的另一件事是为每个子类的每一行都有一个selectbooleancheckbox，然后有一个列标题复选框的监听器，它遍历列表中的每个项目并相应地设置值。我在这里遇到的问题是，当我更新数据表时，所有的复选框都会被卡在“检查”状态。状态。

这就是我的网格： ---------------------------------------- |

|班级| []子类1 | []子类2 |

| Cls A | [] | [] |

| Cls B | [] | [] |

| Cls n | [] | [] |

有＆＃39; n＆＃39;该表的可能行。

有没有人能够举例说明我想做什么，他们可以指点我？

谢谢，

Answer 1

首先，请确保您拥有某种模型，您可以将复选框绑定到该模型。例如：

public class MyObject {

  private String name;
  private boolean bool1;
  private boolean bool2;
  // Add getters and setters

  public MyObject(String name, boolean bool1, boolean bool2) {
    this.name = name;
    this.bool1 = bool1;
    this.bool2 = bool2;
  }

}

然后，在你的bean中添加一个布尔列表来存储标题中复选框的状态：

private List<MyObject> myObjects = new ArrayList<>();
private List<Boolean> headerChecks = new ArrayList<>();
// Add getter and setter

@PostConstruct
private void init() {
  myObjects.add(new MyObject("Object 1", false, true));
  myObjects.add(new MyObject("Object 2", false, false));
  myObjects.add(new MyObject("Object 3", true, true));

  headerChecks.add(false);
  headerChecks.add(false);
}

现在，在复选框列标题中有一个带有侦听器的复选框。在侦听器中设置该列的所有复选框的状态。然后只更新列中的复选框。为此，我使用了selector个特定类别的选择元素：@(.bool1)。

<p:column>
  <f:facet name="header">
    <p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
      <p:ajax listener="#{myBean.headerClickListener}"
              update="@(.bool1)"/>
    </p:selectBooleanCheckbox>
    <p:outputLabel for="bool1" value="Bool 1"/>
  </f:facet>
  <p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
</p:column>

在侦听器中，设置相应行复选框的状态：

public void headerClickListener(AjaxBehaviorEvent event) {
  for (MyObject myObject : myObjects) {
    if (event.getComponent().getId().equals("bool1")) {
      myObject.setBool1(headerChecks.get(0));
    }
    if (event.getComponent().getId().equals("bool2")) {
      myObject.setBool2(headerChecks.get(1));
    }
  }
}

完整的表格：

<p:dataTable id="dataTable" value="#{myBean.myObjects}" var="item">
  <p:column headerText="Name">
    <h:outputText value="#{item.name}"/>
  </p:column>
  <p:column>
    <f:facet name="header">
      <p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
        <p:ajax listener="#{myBean.headerClickListener}"
                update="@(.bool1)"/>
      </p:selectBooleanCheckbox>
      <p:outputLabel for="bool1" value="Bool 1"/>
    </f:facet>
    <p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
  </p:column>
  <p:column>
    <f:facet name="header">
      <p:selectBooleanCheckbox id="bool2" value="#{myBean.headerChecks[1]}">
        <p:ajax listener="#{myBean.headerClickListener}"
                update="@(.bool2)"/>
      </p:selectBooleanCheckbox>
      <p:outputLabel for="bool2" value="Bool 2"/>
    </f:facet>
    <p:selectBooleanCheckbox value="#{item.bool2}" styleClass="bool2"/>
  </p:column>
</p:dataTable>

请注意，这完全是WET。你可能想要干一点。

结果：