-1

3 つの入力フィールドと 2 つのコマンド ボタン (送信とキャンセル) を持つフォームがあります。ユーザーがフォームを送信すると、下のデータ テーブルに 3 つの列で情報が入力されます。挿入された各行の EDIT および DELETE コマンド リンクを含むアクション列もあります。[編集] をクリックすると、そのレコードの情報を上記のフォームに入力する必要があります。フォームが送信された場合は、レコードが既に存在するかどうかを確認します。レコードが存在しない場合は、リストに追加します。

XHTML1 名: 

                    <h:outputLabel>LastName:</h:outputLabel>
                    <h:inputText id="lastName" value="#{form.lastName}"/>

                    <h:outputLabel>MiddleName:</h:outputLabel>
                    <h:inputText id="middleName" value="#{form.middleName}" />

                    <h:commandButton value="Cancel" action="#{formBacking.cancel}" immediate="true"></h:commandButton>
                    <h:commandButton value="Submit" action="#{formBacking.submit}"></h:commandButton>

                </h:panelGrid>

            </h:form>

XHTML2

ユーザーの詳細 

            <h:column>
                <f:facet name="header">FirstName</f:facet>
                <h:outputText value="#{userDetails.fname}" />
            </h:column>

            <h:column>
                <f:facet name="header">LastName</f:facet>
                <h:outputText value="#{userDetails.lname}" />
            </h:column>

            <h:column>
                <f:facet name="header">MiddleName</f:facet>
                <h:outputText value="#{userDetails.mName}" />
            </h:column>

            <h:column>
                <f:facet name="header">Action</f:facet>
                <h:commandLink
                    action="#{formBacking.editUser(userDetails)}"
                    value="Edit" />
                <h:commandLink
                    action="#{formBacking.deleteUser(userDetails)}"
                    value="Delete" />
            </h:column>

        </h:dataTable>
    </h:form>

 Form.java
    @Managed Bean
    @ViewScoped
    private String firstName = "";
    private String lastName = "";
    private String middleName = "";
    //Setters and getters

    UserBacking.java

    @ManagedBean
    @ViewScoped

    private List<Form> userList = new ArrayList<Form>();
    \\setters and getters

    public void submit(){}
    public void cancel(){}
    public void editUser(){}
    public void deleteUser(){}

What would be the best way to handle the edit functionality?
4

2 に答える 2

1

セッション スコープの Managed Bean を使用します。

最初に、データ テーブル内のユーザーのリストを表示します。User firstName フィールドをコマンド リンクにします。これをクリックすると、対応するユーザーの詳細ページが表示され、このページで CRUD (編集、削除... 機能) を追加できます。

<p:dataTable border="1" value="#{gestionUtilisateurMB.usersList}" 
                     var="userObj"
                     paginator="true" rows="10"  
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink}      
    {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}   
      {RowsPerPageDropdown}"  
                     rowsPerPageTemplate="5,10,15"
                     rowIndexVar="rowIndex"
                      binding="#{table}">
                        <p:column id="column1">
                            <f:facet name="header">
                                <h:outputText 
        value="Login"></h:outputText>
                            </f:facet>


                              <h:commandLink action="#
      {gestionUtilisateurMB.showUserDetails}" value="#{userObj.name}">  
                                 <f:setPropertyActionListener 
       target="#{gestionUtilisateurMB.selectedUserRow}" value="#{userObj}" />
                                 <f:setPropertyActionListener target="# 
         {gestionUtilisateurMB.selectedUserRow.dbRowIndex}" value="#{table.rowIndex}"/>

                              </h:commandLink>  

                        </p:column>
                        <p:column id="column2">
                            <f:facet name="header">
                                <h:outputText 
            value="Name"></h:outputText>
                            </f:facet>
                            <h:outputText value="#
            {userObj.lastName}"></h:outputText>
                        </p:column>

                         <p:column id="column3">
                            <f:facet name="header">
                                <h:outputText id="text3" 
            value="First Name"></h:outputText>
                            </f:facet>
                            <h:outputText value="#
              {userObj.firstName}"></h:outputText>
                         </p:column>

                          <p:column id="column4">
                              <f:facet name="header">
                         <f:facet name="footer">  
                          </f:facet> 

                </p:dataTable>

ユーザーの詳細:

 <h:panelGrid id="display" header="User Detail" columns="2" cellpadding="4">  

                           <f:facet name="header">  
                              <p:graphicImage value="/src/main/resources/images/users
   /user.png"/>  
                           </f:facet>   
                            <h:outputText value="rowIndex:" />  
                            <h:outputText value="#
        {gestionUtilisateurMB.selectedUserRow.dbRowIndex}" /> 

                            <h:outputText value="Login:" />  
                            <h:outputText value="#
        {gestionUtilisateurMB.selectedUserRow.name}" />  

                            <h:outputText value="Name:" />  
                            <h:outputText value="#
          {gestionUtilisateurMB.selectedUserRow.lastName}" />  

                            <h:outputText value="First Name:" />  
                            <h:outputText value="#
             {gestionUtilisateurMB.selectedUserRow.firstName}" />  

                            <h:outputText value="Email:" />  
                            <h:outputText value="#
            {gestionUtilisateurMB.selectedUserRow.email}" />  

                            <h:outputText value="Phone:" />  
                            <h:outputText value="#
                  {gestionUtilisateurMB.selectedUserRow.phoneNumber}" />  
                     </h:panelGrid>
于 2012-09-06T05:40:56.703 に答える
1

rich:modalpanel編集と削除のアクションに使用できます。あなたはそれについて知っていると思います。
メソッドもあるポップアップが表示されます。actionListenerそのアクションリスナーメソッドを使用して、レコードが存在するかどうかなどのチェックを構成できます。

于 2012-09-06T05:21:01.527 に答える