2017-11-03 4 views
0

複数の項目を選択します。私はシンプルselectOneMenuボックスは以下のようになります持って選択ボックスからJSF

<h:form> 
    <h3>Combo Box</h3> 
    <h:selectOneMenu value = "#{userData.data}"> 
     <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
     <f:selectItem itemValue = "2" itemLabel = "Item 2" /> 
     <f:selectItem itemValue = "3" itemLabel = "Item 3" /> 
     <f:selectItem itemValue = "4" itemLabel = "Item 4" /> 
     <f:selectItem itemValue = "5" itemLabel = "Item 5" />  
    </h:selectOneMenu> 
    <h:commandButton value = "+" /> 
    </h:form> 

(追加)+をクリックして、このボックスから複数の項目を選択している私は何をしたいボタンの隣にボックス。これは、ユーザーが最初にボックス内のアイテムを選択し、+をクリックすると、別の+ボタンでその下に新しいボックスを表示して、別のアイテムを追加できるようにして、選択したアイテムが選択したアイテムを削除できるように、新しいボックスの上に - 記号を付けて表示します。それはどういうわけかのように動作します:this bootstrap form

JSFでこの種のボックスを使用することはできますか?ありがとうございました!

答えて

1

はいこれはリンクで行ったのと同じ方法で可能です。

panelGridが必要な場合。ボタンをクリックすると、ボタンがアクションリスナーを呼び出し、これにより新しいselectonemenuが作成されます。フォームやパネルグリッドを更新することを忘れないでください(これはマネージドビーンでも可能です)。

<h:form id="myform"> 
     <h:panelGrid id="myPanelGrid" columns="1"> 
         <h:selectOneMenu value = "#{userData.data}"> 
          <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
          <f:selectItem itemValue = "2" itemLabel = "Item 2" /> 
          <f:selectItem itemValue = "3" itemLabel = "Item 3" /> 
          <f:selectItem itemValue = "4" itemLabel = "Item 4" /> 
          <f:selectItem itemValue = "5" itemLabel = "Item 5" />  
         </h:selectOneMenu> 
         <h:commandButton value = "+" actionListener="#{managedBean.addSelectOneMenuToGrid()}"> 
         <f:ajax execute="@form" render=":myForm" /> 
         </h:commandButton> 
     </h:panelGrid> 
<h:panelGrid id="myPanelGridToAdd" columns="1"> 
... 
</h:panelGrid> 
    </h:form> 

あなたのマネージドBeanでは、ボタン+をクリックした後に、新しいselectonemenuをプログラムでパネルグリッドに追加します。

public void addSelectOneMenuToGrid() 
    { 
     HtmlPanelGrid component = (HtmlPanelGrid) FacesContext.getCurrentInstance().getViewRoot().findComponent(":myform:myPanelGridToAdd"); 
     SelectOneMenu newMenu = new SelectOneMenu(); 
     newMenu.setRendered(true); 
     UISelectItems items = new UISelectItems(); 

     .... 
     newMenu.getChildren().add(items); 
     ... 
    } 

これは簡単ではありません。しかし、あなたが必要とするものは簡単ではありません:D

幸運。マネージドビーンの部分に関する詳細情報が必要な場合は、お気軽に

+0

xhtmlで 'ui:repeat'を使用してください。 – Kukeltje

関連する問題