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>

豆2

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
}

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

任何想法如何修复这个错误？ 提前致谢！

更新 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

您确实没有更新对话框中的数据表。 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>

Answer 2

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

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