Primefaces 数据表更新数据表

Question

我对 primefaces 数据表有疑问。我有一个包含一些条目的数据表和一个包含按钮的列。如果按下按钮，将打开一个弹出窗口，其中包含另一个数据表。第二个数据表中的条目取决于按下按钮的行。

<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
   rowKey="#{item.id}" selection="#{bean1.selectedItem}"
   selectionMode="single">

    <p:column headerText="ID">
        <h:outputText value="#{item.id}" />
    </p:column>
    ...
    <p:column headerText="Edit Entries">
        <p:commandButton value="Edit Entries"
            actionListener="#{bean2.updateEntries(item)}" ajax="true"
            oncomplete="PF('edit_entries').show()" />

         </p:column>
</p:dataTable>

<!-- Second datatable in the popup -->
<p:dialog header="Edit Entries" widgetVar="edit_entries" modal="true"
    resizable="false">
        <p:dataTable id="list2" var="entry"
            value="#{bean2.entriesList}" rowKey="#{entry.id}"
            selection="#{bean2.selectedEntry}" selectionMode="single">
            <p:column headerText="Entry Number">
                <h:outputText value="#{entry.number}" />
            </p:column>
        </p:dataTable>
        <f:facet name="footer">
             <p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
        </f:facet>
</p:dialog>
</form>

Bean2

public void updateEntries(Item selectedItem) {
    this.entriesList = this.entriesQuery.getAllEntriesByItemID(selectedItem.getId());//db query could take some time
    System.out.println("entrieslist size: " + this.entriesList.size()); //prints the correct size
}

问题是弹出数据表中没有列出任何条目，尽管在数据库查询后的列表中有一些条目。

有什么办法可以解决这个错误吗？提前致谢！

更新 1：

<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
   rowKey="#{item.id}" selection="#{bean1.selectedItem}"
   selectionMode="single">

    <p:column headerText="ID">
        <h:outputText value="#{item.id}" />
    </p:column>
    ...
    <p:column headerText="Edit Entries">
        <p:commandButton value="Edit Entries" update=":dialogUpdateEntries"
            actionListener="#{bean2.updateEntries(item)}" ajax="true"
            oncomplete="PF('edit_entries').show()" />

         </p:column>
</p:dataTable>
</h:form>

<!-- Second datatable in the popup -->
<p:dialog header="Edit Enries" id="dialogUpdateEntries" widgetVar="edit_entries" modal="true"
    resizable="false">
    <h:form id="formEntriesList">
        <p:dataTable id="list2" var="entry"
            value="#{bean2.entriesList}" rowKey="#{entry.id}"
            selection="#{bean2.selectedEntry}" selectionMode="single">
            <p:column headerText="Entry Number">
                <h:outputText value="#{entry.number}" />
            </p:column>
        </p:dataTable>
        <f:facet name="footer">
             <p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
        </f:facet>
    </form>
</p:dialog>

Answer 1

尝试将 update="list2" 添加到“编辑条目”命令按钮（即使 update="@widgetVar(edit_entries)" 也应该有效）。

如果，由于页面布局和结构，您无法使用上述建议定位第二个数据table，则将 styleClass="tList2" 添加到第二个 table，并更新它update="@(.tList2)" 在编辑按钮上。

Answer 2

您确实没有更新对话框中的数据 table。 JSF 不会在模型更改时自动更新视图，您必须明确告诉视图这样做。为此，您可以使用 ajax 操作组件的 update 属性。这需要一个 JSF 客户端 ID，该 ID 可以按照相关答案中概述的规则找到：How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar".

鉴于问题中显示的标记，那将是

<p:commandButton ... update=":list:list2" />

但是，还有另一个潜在的问题。您正在 <p:dialog modal="true"> inside 表单中使用，而不是为对话框提供自己的表单。这样，对话框可能在 HTML DOM 树中不可用，因为 JavaScript（负责处理 ajax 内容的人）希望找到它。给对话框自己的形式应该可以解决这个问题。它还将解决未来潜在的问题，如此相关问题中处理的那样从对话框内部调用操作：<p:commandbutton> action doesn't work inside <p:dialog>.

<h:form id="viewForm">
    ...
    <p:commandButton ... update=":editDialog" />
    ...
</h:form>

<p:dialog id="editDialog" modal="true">
    <h:form id="editForm">
        ...
    </h:form>
</p:dialog>

Primefaces 数据表更新数据表

Primefaces datatable update datatable

datatable

jsf

primefaces