使用动态添加的新行更新primefaces dataTable

时间:2014-02-02 22:51:54

标签: jsf primefaces datatable

当我点击按钮New <p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>时,只有第一次点击时,我的dataTable会添加一个新行,并刷新页面。除第一个之外的几个派系都没有刷新dataTable。因此,要查看我新添加的行,我使用F5键刷新页面。当然我的update="dataTableSaisiePiece"不起作用或只起作用而不是第一次点击。

这是我的页面home.xhtml:

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui">
    <script type="text/javascript">
            function addRowOnComplete() {
      jQuery('#supercoolnewrow').trigger('click');
    }
    </script>
        <ui:composition template="/resources/template/all.xhtml">
            <ui:define name="titre">Saisie</ui:define>

            <ui:define name="content">
                <p:tabView id="ViewPlan">

                    <p:tab id="tab2" title="Saisie 1">
                        <h:outputScript library="js" name="frenchLocale.js" />
                                <h:form id="formPiece">
                                    <p:panel id="panelSaisie" header="Saisir" style="color: brown;font-size: 15px">
                                        <h:panelGrid columns="3" >
                                                <p:outputLabel for="description" value="Description:" ></p:outputLabel>
                                                <p:inputText id="description" value="#{ecritureCtrl.description}" required="true" label="Description" maxlength="100" size="75">  
                                                        <f:validateLength maximum="100" />  
                                                    </p:inputText>
                                                    <p:message for="description" />

                                                <p:outputLabel for="date" value="Date:" ></p:outputLabel>
                                                <p:calendar locale="fr" id="date"  required="true" label="Date" value="#{ecritureCtrl.date}" />  
                                                <p:message for="date" />  

                                                <p:outputLabel for="code" value="Code Avant" ></p:outputLabel>
                                                <p:inputText id="code" value="#{ecritureCtrl.code}" required="true" >  

                                                </p:inputText>
                                                <p:message for="code" />

                                            </h:panelGrid>
                                        <br/>
                                        <p:dataTable var="line" value="#{ecritureCtrl.lignes}"  id="dataTableSaisiePiece" >

                                <p:column headerText="First Name" style="width:150px">
                                    <p:inputText value="#{line.intituleCompte}" style="width:100%"/>
                                 </p:column>  

                                <p:column headerText="Last Name" style="width:150px">
                                    <p:inputText value="#{line.code}" style="width:100%"/>

                                </p:column>

                            </p:dataTable>


                           </p:panel>
                                    <p:commandButton  actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>
                                   </h:form>  

                            </p:tab>

                    <p:tab id="tab3" title="Saisie 2">
                    </p:tab>

                </p:tabView>

            </ui:define>
        </ui:composition>

    </html>

我的ManagedBean:

    @ManagedBean (name = "ecritureCtrl")
    @SessionScoped
    public class EcritureCtrl {
    private List<Avant> lignes = new ArrayList<Avant>();
    Avant unUser;

    private String description;
    private Date date;
    private String code;
        public EcritureCtrl() {
            lignes.add(new Avant());
         }

        public void newLine(ActionEvent actionEvent){
            lignes.add(new Avant());            
        }

    }
你能帮帮我吗? 提前谢谢。

1 个答案:

答案 0 :(得分:1)

这似乎对我有用

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class EcritureCtrl implements Serializable {
    private static final long   serialVersionUID    = 1L;
    private String              code;
    private Date                date;

    private String              description;
    private List<Avant>         lignes              = new ArrayList<Avant>();
    private Avant               unUser;

    public String getCode() {
        return this.code;
    }

    public Date getDate() {
        return this.date;
    }

    public String getDescription() {
        return this.description;
    }

    public List<Avant> getLignes() {
        return this.lignes;
    }

    public Avant getUnUser() {
        return this.unUser;
    }

    @PostConstruct
    private void init(){
        this.lignes.add(new Avant());
    }

    public void newLine(ActionEvent actionEvent) {
        this.lignes.add(new Avant());
    }

    public void setCode(String code) {
        this.code = code;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public void setLignes(List<Avant> lignes) {
        this.lignes = lignes;
    }

    public void setUnUser(Avant unUser) {
        this.unUser = unUser;
    }

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sorry</title>
</h:head>
<h:body>
<script type="text/javascript">
function addRowOnComplete() {
    alert();
}
</script>
    <h:form id="formPiece">

        <p:messages id="messages" showDetail="true" autoUpdate="true"
            closable="true" />

        <p:tabView id="ViewPlan">

            <p:tab id="tab2" title="Saisie 1">
                <p:panel id="panelSaisie" header="Saisir"
                    style="color: brown;font-size: 15px">
                    <h:panelGrid columns="3">
                        <p:outputLabel for="description" value="Description:"></p:outputLabel>
                        <p:inputText id="description" value="#{ecritureCtrl.description}"
                            required="true" label="Description" maxlength="100" size="75">
                            <f:validateLength maximum="100" />
                        </p:inputText>
                        <p:message for="description" />

                        <p:outputLabel for="date" value="Date:"></p:outputLabel>
                        <p:calendar locale="fr" id="date" required="true" label="Date"
                            value="#{ecritureCtrl.date}" />
                        <p:message for="date" />

                        <p:outputLabel for="code" value="Code Avant"></p:outputLabel>
                        <p:inputText id="code" value="#{ecritureCtrl.code}"
                            required="true">

                        </p:inputText>
                        <p:message for="code" />

                    </h:panelGrid>
                    <br />
                    <p:dataTable var="line" value="#{ecritureCtrl.lignes}"
                        id="dataTableSaisiePiece">

                        <p:column headerText="First Name" style="width:150px">
                            <p:inputText value="#{line.intituleCompte}" style="width:100%" />
                        </p:column>

                        <p:column headerText="Last Name" style="width:150px">
                            <p:inputText value="#{line.code}" style="width:100%" />
                        </p:column>

                    </p:dataTable>


                </p:panel>
                <p:commandButton actionListener="#{ecritureCtrl.newLine}"
                    value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()"
                     ajax="true" />

            </p:tab>

            <p:tab id="tab3" title="Saisie 2">
            </p:tab>

        </p:tabView>
    </h:form>

</h:body>
</html>