JSF无法将数据传递给bootsrtap模式

时间:2018-06-18 19:46:12

标签: jsf jsf-2.2 bootsfaces

大家好我拥有一个bootsfaces dataTabble,每一行都有一个编辑结束删除动作,我想显示一个包含所选行数据的模态来编辑该对象。

我成功获取所选行,我将数据传递给managedBean,我将数据分配给managedProperties,但模态输入元素中没有显示任何内容。

这是我的dataTable代码:

<b:dataTable id="articleslist" value="#{listeArticlesAction.listeArticles}" var="article" page-length="10" paginated="true"
                                 page-length-menu="10,20,30">

                                    <b:dataTableColumn value="#{article.code}" label="Code" />
                                    <b:dataTableColumn value="#{article.nom}" label="Nom" />
                                    <b:dataTableColumn value="#{article.description}" label="Description" />
                                    <b:dataTableColumn value="#{article.prix}" label="Prix (DH)" />
                                    <b:dataTableColumn label="Modifier" style="text-align: center">
                                        <h:commandButton style="padding: 0 4px;" iconAwesome="pencil" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
                                         action="#{listeArticlesAction.modifierArticle}">
                                            <f:setPropertyActionListener target="#{listeArticlesAction.editArticle}" value="#{article}" 
                                                 />
                                            <f:ajax render="@form"/>
                                         </h:commandButton >
                                    </b:dataTableColumn>
                                    <b:dataTableColumn label="Supprimer" style="text-align: center">
                                        <h:commandButton  style="padding: 0 4px; text-align: center;" iconAwesome="trash" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
                                         onclick="confirmDelete()" action="#{listeArticlesAction.supprimerArticle}" >
                                            <f:param name="actionDelete" value="article" />
                                         </h:commandButton >
                                    </b:dataTableColumn>
                                </b:dataTable>

这是我的managedBean课程:

public class ListeArticlesAction {

    private List<Article> listeArticles = new ArrayList<Article>();

    private String editArticleNom;
    private String editArticleDescription;
    private int editArticlePrix;
    private Article editArticle;


    /**
     * Methode pour preparer la liste des articles
     */
    @PostConstruct
    public void init() {

        listeArticles = ServiceFactory.getArticleService().allArticles();

    }

    public List<Article> getListeArticles() {
        return listeArticles;
    }
    public void setListeArticles(List<Article> listeArticles) {
        this.listeArticles = listeArticles;
    }


    public String getEditArticleNom() {
        return editArticleNom;
    }
    public void setEditArticleNom(String editArticleNom) {
        this.editArticleNom = editArticleNom;
    }
    public String getEditArticleDescription() {
        return editArticleDescription;
    }
    public void setEditArticleDescription(String editArticleDescription) {
        this.editArticleDescription = editArticleDescription;
    }
    public int getEditArticlePrix() {
        return editArticlePrix;
    }
    public void setEditArticlePrix(int editArticlePrix) {
        this.editArticlePrix = editArticlePrix;
    }


    public Article getEditArticle() {
        return editArticle;
    }

    public void setEditArticle(Article editArticle) {
        this.editArticle = editArticle;
    }

    public void supprimerArticle() {

    }

    /**
     * methode pour modifier un article quelconque
     */
    public void modifierArticle() {

        editArticleDescription = editArticle.getDescription();
        editArticleNom = editArticle.getNom();
        editArticlePrix = editArticle.getPrix();
    }
}

这是我的模态html代码:

<div class="modal" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Modifier le produit
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            &#215;
                        </span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="edit_product_name" class="form-control-label">
                            Nom:
                        </label>
                        <h:inputText type="text" class="form-control" id="edit_product_name" 
                        value="#{listeArticlesAction.editArticleNom}" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label for="edit_product_description" class="form-control-label">
                            Description:
                        </label>
                        <h:inputTextarea class="form-control" id="edit_product_description"
                        value="#{listeArticlesAction.editArticleDescription}" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label for="edit_product_price" class="form-control-label">
                            Prix(DH):
                        </label>
                        <h:inputText type="text" class="form-control m-input" id="edit_product_price"
                        value="#{listeArticlesAction.editArticlePrix}" autocomplete="off" />
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Annuler
                    </button>
                    <button type="button" class="btn btn-primary">
                        Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

很可能您正在更新屏幕的错误部分。很多人第一次使用模态就是这种情况。事实是,加载页面时将呈现模式。这可能是单击按钮之前的一分钟。因此,模态不知道要显示哪些数据。您可以使用命令按钮的update属性来告诉它。

据我所知,数据表和Java bean都可以。 update区域除外。您的代码段不显示<h:form><b:form>标签的位置,因此几乎可以肯定它在数据表之外。但是,您应该更新的是模态的内容。不要更新整个模态(因为这会使它再次隐藏)。只是内容。像update="@(.modal-dialog)"之类的东西。

模态本身对我来说有点奇怪。什么是listeArticlesAction?从其他代码段来看,您想使用listeArticlesAction.editArticle

旁注:我建议您为变量名(和类似的东西)选择一种语言,并始终使用它。法语是一个不错的选择,尽管大多数开发人员(除我以外)都推荐英语。但是,记住变量名已经足够困难了。您不必增加记住语言的负担:)。