如何在质数中有多于一列的复选框 [英] how to have more than one column of checkboxes in primefaces

问题描述

我需要使用primefaces数据表来做一个用户权限网格.对于每一行:第一列是类名，第二列是两个子类之一的许可复选框.第三列是允许其他子类使用的复选框.第2列和第3列的标题必须具有子类标题以及一个复选框，该切换将切换该子类中的所有其他复选框.我想我可以在滚动面板中并排使用两个或三个数据表，但是在将复选框的文本列在复选框左侧时出现了问题(它想放在顶部).
我尝试过的另一件事是为每个子类的每一行都具有一个selectbooleancheckbox，然后为列标题复选框提供了一个侦听器，该复选框遍历列表中的每个项目并相应地设置了值.我这里的问题是，当我更新数据表时，所有复选框都停留在已检查"状态.

I need to do a user permissions grid hopefully using a primefaces datatable. For each row: Column one is a class name, Column two is a checkbox for permission for one of two subclasses. Column three is a checkbox for permission for the other subclass. The headers of columns two and three must have the subclass title plus a checkbox, the toggles all the other checkboxes in that subclass. I think I can use two or three datatables side by side inside a scrollpanel but I'm having issues lining up the column text to the left of the checkbox (it wants to go on top).
Another thing I tried was to just have a selectbooleancheckbox for each row for each subclass and then have a listener for the column header checkbox that iterates through each item in the list and set the value accordingly. The issue I have here is that when I update the datatable, then all the checkboxes get stuck in the 'checked' state.

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

This is what my grid: ----------------------------------------|

此表可能有'n'行.

有人能给我指出我想做的事的例子吗?

Does anyone have examples of what I want to do that they can point me to?

谢谢

推荐答案

首先，请确保您具有可以将复选框绑定到其中的某种模型.例如:

To start of, make sure you have some kind of model where you can bind the checkboxes to. For example:

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中添加一个布尔值列表，以将复选框的状态存储在标头中:

Then, in your bean add a list of booleans to store the state of the checkboxes in the header:

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).

Now, in the checkbox column header have a checkbox with a listener. In the listener set the state of all checkboxes of that column. Then update only the checkboxes in the column. To do so I've used a selector selecting elements with a specific class: @(.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>

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

In listener the state of the corresponding row checkboxes is set:

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>

请注意，这一切都是相当湿的.您可能想稍微塞满东西.

Please note that this is all quite WET. You might want to DRY stuff up a bit.

结果:

这篇关于如何在质数中有多于一列的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！