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

【问题标题】：update primefaces dataTable with new rows adding dynamically使用动态添加的新行更新primefaces dataTable
【发布时间】：2014-02-02 22:51:53
【问题描述】：

当我单击 New <p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/> 按钮时，仅在第一次单击时我的 dataTable 中就会添加一个新行并刷新页面。除第一个外的几个派系都没有刷新数据表。所以要查看我新添加的行，我使用 F5 键刷新我的页面。当然，我的update="dataTableSaisiePiece" 不起作用或只能在第一次点击时起作用。

这是我的主页.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());            
        }

    }

你能帮帮我吗？提前致谢。

【问题讨论】：

前卫的equals和hashcode方法如何？
avant 有转换器吗？
@Leo 我没有 equals 和 hashcode 方法。我不使用任何一个转换器。我应该吗？

标签： jsf primefaces datatable

【解决方案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>

【讨论】：

也考虑使用 ViewScoped
完美的狮子座它工作。这正是我想要的。我删除了没有用的Javascript函数addRowOnComplete ()。我不明白你的评论：> 也考虑使用 ViewScoped 你能解释一下吗？
有时，会话范围可能过于广泛。使用会话范围的页面会在整个用户会话期间保留，如果该用户浏览您的应用程序，它将在会话中保留越来越多的数据，如果您的意图是同时为多个用户提供服务，这可能会成为问题由于内存限制。这就是为什么对于只需要将上下文与交互限制在同一页面上的页面，您可以使用视图范围，它只会在您离开该页面之前存在。
感谢您提供这一重要信息。事实上，我是 jsf 开发的新手，我承认我需要一本好书来掌握这项技术的基础知识 :) 如果我将 @SessionScoped 放入 managedBean ecritureCtrl，这是我的页面 home.xhtml 随时准备好由用户使用，如果用户有一个有效的会话。目前，我还没有在我的应用程序中管理用户会话。
我问自己的问题是如何确保不会因为放入会话中的所有对象而导致内存爆炸。据我了解，bean 在容器中的服务器端进行管理。反对由 ManagedBean 管理在哪里？选择会话范围需要考虑哪些标准？