如何在質數中有多於一列的復選框

Question

我希望使用primefaces數據表來做一個用戶權限網格。 對於每一行：第一列是類名，第二列是兩個子類之一的許可復選框。 第三列是允許其他子類使用的復選框。 第2列和第3列的標題必須具有子類標題以及一個復選框，該切換將切換該子類中的所有其他復選框。 我想我可以在滾動面板內並排使用兩個或三個數據表，但是在將復選框列的文本對齊復選框的左側時出現了問題（它想放在頂部）。
我嘗試過的另一件事是，每個子類的每一行都具有一個selectbooleancheckbox，然后為列標題復選框提供了一個偵聽器，該復選框遍歷列表中的每個項目並相應地設置了值。 我這里的問題是，當我更新數據表時，所有復選框都停留在“已檢查”狀態。

這是我的網格：---------------------------------------- |

| 類| []子類別1 | []子類別2 |

| Cls A | [] | [] |

| Cls B | [] | [] |

| Cls n | [] | [] |

該表有“ 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);
}

現在，在復選框列標題中有一個帶有偵聽器的復選框。 在偵聽器中，設置該列所有復選框的狀態。 然后僅更新該列中的復選框。 為此，我使用了選擇器來選擇具有特定類的元素： @(.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>

請注意，這一切都是相當濕的。 您可能要稍微塞滿一些東西。

結果：