2017-10-17 24 views
0

J'ai une exigence pour un datatable éditable qui a une seule colonne, disons marque, que lorsqu'il est défini sur "Autre" va remplacer l'éditeur dans le prochain column, model - avec un inputText plutôt qu'un selectOne. Si une marque de voiture particulière est sélectionnée, la liste des modèles de cette marque s'affiche. Si "Autre" est choisi, ils peuvent saisir un modèle dans un champ de saisie. Je n'arrive pas à faire fonctionner la mécanique dans les primitives en utilisant diverses combinaisons de rendus et d'événements. Est-ce que ce genre de commutation en ligne des composants d'édition en fonction des données de la rangée est possible? J'ai construit un exemple simple à l'aide de la démo datable de primefaces pour les voitures (et en ajoutant un champ Modèle) pour illustrer ce que je tente.primefaces modifier éditeur pour une colonne dans datatable basé sur la sélection dans une autre colonne

page extrait

  <p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" 
      editable="true" style="margin-bottom:20px"> 
      <f:facet name="header"> 
        Row Editing 
      </f:facet> 

      <p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" 
       update="cars1" /> 
      <p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" 
       update="cars1" /> 

      <p:column headerText="Id"> 
       <p:cellEditor> 
        <f:facet name="output"> 
         <h:outputText value="#{car.id}" /> 
        </f:facet> 
        <f:facet name="input"> 
         <p:inputText id="modelInput" value="#{car.id}" style="width:100%" /> 
        </f:facet> 
       </p:cellEditor> 
      </p:column> 

      <p:column headerText="Year"> 
       <p:cellEditor> 
        <f:facet name="output"> 
         <h:outputText value="#{car.year}" /> 
        </f:facet> 
        <f:facet name="input"> 
         <p:inputText value="#{car.year}" style="width:100%" label="Year" /> 
        </f:facet> 
       </p:cellEditor> 
      </p:column> 

      <p:column headerText="Brand"> 
       <p:cellEditor> 
        <f:facet name="output"> 
         <h:outputText value="#{car.brand}" /> 
        </f:facet> 
        <f:facet name="input"> 
         <h:selectOneMenu value="#{car.brand}" style="width:100%"> 
          <f:selectItems value="#{dtEditView.brands}" var="man" 
           itemLabel="#{man}" itemValue="#{man}" /> 
          <p:ajax event="change" immediate="true" update="model model_ti"></p:ajax> 
         </h:selectOneMenu> 
        </f:facet> 
       </p:cellEditor> 
      </p:column> 

      <p:column headerText="Model"> 
       <p:cellEditor rendered="#{car.brand != 'Other'}"> 
        <f:facet name="output"> 
         <h:outputText value="#{car.model}" /> 
        </f:facet> 
        <f:facet name="input"> 
         <h:selectOneMenu value="#{car.model}" style="width:100%" 
          id="model"> 
          <f:selectItems value="#{dtEditView.getModels(car.brand)}" 
           var="man" itemLabel="#{man}" itemValue="#{man}" /> 
         </h:selectOneMenu> 
        </f:facet> 
       </p:cellEditor> 
       <p:cellEditor rendered="#{car.brand == 'Other'}"> 
        <f:facet name="output"> 
         <h:outputText value="#{car.model}" /> 
        </f:facet> 
        <f:facet name="input"> 

         <h:inputText value="#{car.model}" style="width:100%" 
          id="model_ti" /> 

        </f:facet> 
       </p:cellEditor> 
      </p:column> 

Merci!

Répondre

0

J'ai été capable de résoudre ce problème en mettant un identifiant sur l'éditeur de cellule pour le modèle, et en l'ajoutant à la liste de mise à jour lors du changement de marque.

+0

Très bien vous l'avez résolu, mais des exemples de code explicites aident d'autres utilisateurs s'ils rencontrent le même problème. À votre santé! – Kukeltje