0

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

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

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

| 甲级 | [] | [] |

| 分类 B | [] | [] |

| 分类号 | [] | [] |

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

有没有人有我想做什么的例子,他们可以指出我?

谢谢,

4

1 回答 1

2

首先,请确保您有某种可以将复选框绑定到的模型。例如:

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);
}

现在,在复选框列标题中有一个带有侦听器的复选框。在侦听器中设置该列的所有复选框的状态。然后仅更新列中的复选框。为此,我使用了一个选择器来选择具有特定类的元素:@(.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>

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

结果:

于 2018-03-17T18:48:16.907 回答