檢票：動態填充單元使用自定義內容

Question

我利用檢票列表視圖創建列和行做了一個表，代碼如下：

ErhebungMatrixPanel.java

public ErhebungMatrixPanel(String id) { 
    super(id); 
    this.add(matrixForm); 
    matrixForm.add(new ListView<Zustaendigkeit>("columns", zustaendigkeiten){ 
     private static final long serialVersionUID = 1L; 

     @Override 
     protected void populateItem(ListItem<Zustaendigkeit> item) { 
      final int index = item.getIndex(); 
      item.add(new Label("zustLabel", zustaendigkeiten.get(index).getName().toString())); 
     } 
    }); 

    matrixForm.add(rows = new ListView<Erhebung>("rows", erhebungen){ 
     private static final long serialVersionUID = 1L; 

     @Override 
     protected void populateItem(ListItem<Erhebung> item) { 
      final IModel<Boolean> checked = Model.of(Boolean.FALSE); 
      final int index = item.getIndex(); 
      item.add(new Label("erhebungLabel", erhebungen.get(index).getName())); 

      item.add(new AjaxCheckBox("check", checked) { 
       private static final long serialVersionUID = 1L; 

       @Override 
       protected void onUpdate(AjaxRequestTarget target) { 
        //TODO 
       } 
      }); 
     } 
    }); 
} 

在這個表我想把一個AjaxCheckBox放到每個單元格中，創建一個類似的授權矩陣現在的問題是，由於列表的長度最長可能會增大一些，因此我無法插入靜態數量的CheckBoxes。現在，表格中只有一列覆蓋了CheckBoxes。響應.html文件看起來是這樣的：

<wicket:panel> 
    <form wicket:id="matrixForm"> 
     <table class="matrix"> 
      <thead> 
       <tr class="headers"> 
        <th></th> 
        <span wicket:id="columns"> 
         <th wicket:id="zustLabel"></th> 
        </span> 
       </tr> 
      </thead> 
      <tbody> 
       <tr wicket:id="rows"> 
        <th wicket:id="erhebungLabel"></th> 
        <td><input wicket:id="check" type="checkbox" /></td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</wicket:panel> 

事情是這樣的：

<tbody> 
<tr wicket:id="rows"> 
    <th wicket:id="erhebungLabel"></th> 
    <td><input wicket:id="check" type="checkbox" /></td> 
    <td><input wicket:id="check" type="checkbox" /></td> 
    <td><input wicket:id="check" type="checkbox" /></td>     
</tr> 
</tbody> 

顯然不行，因爲1.它應該是動態的，但我客串JS可以幫助在那裏，2。 Wicket會拋出MarkUp錯誤。

是否有任何newCellItem相似的方法，我可以像使用DataTable一樣使用？

Answer 1

是這樣的東西你需要什麼？

HTML：

<form> 
    <table> 
     <tr> 
      <th></th> 
      <th wicket:id="headerList"><span wicket:id="name"></span></th> 
     </tr> 
     <tr wicket:id="rowList"> 
      <td wicket:id="name"></td> 
      <td wicket:id="cellList"> 
       <input type="checkbox" wicket:id="checkbox"/> 
      </td> 
     </tr> 
    </table> 
</form> 

的Java：

add(new ListView<User>("headerList", new PropertyModel<>(this, "users")) { 
    @Override 
    protected void populateItem(ListItem<User> listItem) { 
     listItem.add(new Label("name", new PropertyModel(listItem.getModelObject(), "name"))); 
    } 
}); 

add(new ListView<String>("rowList", new PropertyModel<>(this, "roles")) { 

    @Override 
    protected void populateItem(ListItem<String> listItem) { 
     final String role = listItem.getModelObject(); 

     listItem.add(new Label("name", role)); 

     listItem.add(new ListView<User>("cellList", new PropertyModel<>(TestPage.this, "users")) { 

      @Override 
      protected void populateItem(ListItem<User> listItem) { 
       final User user = listItem.getModelObject(); 

       listItem.add(new AjaxCheckBox("checkbox", new IModel<Boolean>() { 

        @Override 
        public Boolean getObject() { 
         return user.getRoles().contains(role); 
        } 

        @Override 
        public void setObject(Boolean aBoolean) { 
         if (aBoolean) { 
          user.getRoles().add(role); 
         } else { 
          user.getRoles().remove(role); 
         } 
        } 

        @Override 
        public void detach() { 

        } 
       }) { 

        @Override 
        protected void onUpdate(AjaxRequestTarget ajaxRequestTarget) { 

        } 
       }); 
      } 
     }); 
    } 
});