如何在primefaces中拥有多于一列的复选框

Question

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

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

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

|甲级 | [] | [] |

|分类 B | [] | [] |

|分类号 | [] | [] |

此表有 'n' 个可能的行。

有没有人有我想做的事的例子可以指点我？

谢谢，

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>

请注意，这一切都很湿。你可能想把东西弄干一点。

结果：