JSF2 - 使用 p:dialog 重新加载弹出表并在调用函数后关闭

Question

我是 JSF2 的新手。 我正在尝试使用 p:dialog 显示表格。 该表具有项目列表，并且在行尾具有此删除功能。我的问题是当它单击删除时，整个页面重新加载并且我的弹出表关闭。 但是，当它不在 p:dialog 中时，删除功能可以正常工作。 我的 bean，无论是视图还是会话范围，都会产生相同的输出。

这是我的 bean 中的删除代码

public String delete(Items items) {

    getItemList.remove(items);
    return null;
}

截取我的 xhtml，

<p:dialog header="Item Table" widgetVar="popUpTbl" modal="true" >
        <h:form>
            <p:dataTable style="width:800px;height:485px;" id="popUpTbl" var="item" value="#{myBean.itemList}" >
                <p:column headerText="Item A">
                    <h:outputText value="#{item.itemA}" />
                </p:column>
                <p:column headerText="Item B">
                    <h:outputText value="#{item.itemB}" />                        
                </p:column>
                <p:column headerText="Action">
                    <h:commandLink value="Delete" action="#{myBean.delete(item)}" />
                </p:column>
            </p:dataTable>                
        </h:form>
    </p:dialog>

Answer 1

在 <h:form> 和 <p:dialog> 中添加 id 并通过提供完全限定名称来更新表单，在这种情况下是 :dialogId:formId 并从 <h:commandLink> 更新它，还有一件事我注意到你的对话框 widgetVar 和数据表的 id 相同，这是我在下面的示例中更正的错误

 <p:dialog id="dialogId" header="Item Table" widgetVar="dialogIdWidget" modal="true" >
     <h:form id=formId>
        <p:dataTable style="width:800px;height:485px;" id="popUpTbl" 
            var="item" value="#{myBean.itemList}" >
                    .
                    .
                    .
                    <p:column headerText="Action">
                        <h:commandLink value="Delete" action="#{myBean.delete(item)}" update=":dialogId:formId" />
                    </p:column>
                </p:dataTable>                
            </h:form>
        </p:dialog>

Answer 2

h:commandLink makes 一个完整的帖子并重新加载整个页面，你想使用 p:commandLink 默认使用的 ajax。

试试

<p:commandLink value="Delete" process="@this" update="@form" action="#{myBean.delete(item)}" />

process="@this" 因为p:commandLink 默认处理整个表单（您不需要），update="@form" 因为您需要使用 bean 数据（或至少是数据表，但是这与您的情况相同）。

您本可以保留h:commandLink 并完成like here，但它构建在 p:commandLink 中。