Question

我正在尝试更新<p:layoutUnit>节点选择上的PrimeFaces <p:tree>的内容。但是，当我选择节点时，内容不会更改。刷新页面时，我发现内容已更改。

如何在不刷新整个页面的情况下更改内容？

我的观看代码是：

<h:body>
    <h:form id="form">
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100"  resizable="false" closable="false" collapsible="false">
                <h:outputText value="Top" />
            </p:layoutUnit>
            <p:layoutUnit position="south" size="100" resizable="flase" closable="false" collapsible="false">
                <h:outputText value="Bottom" />
            </p:layoutUnit>
            <p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
                <p:tree id="tree"  value="#{treeBean.root}" selection="#{treeBean.selectedNode}"  var="node" selectionMode="single" dynamic="true"  cache="false" >
                    <p:ajax listener="#{treeBean.onNodeSelect}" update="test" event="select"/>
                    <p:treeNode>
                        <h:outputText value="#{node}"/>
                    </p:treeNode>
                </p:tree>
            </p:layoutUnit>
            <p:layoutUnit position="center" id="test">
                <ui:include src="${treeBean.selectedNode.name}.xhtml"/>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>

Answer 1

首先，不要将布局单元放在窗体中，而是将窗体放在布局单元中。

另一个问题是你有嵌套表格，你不应该有嵌套表格。

您的表单<h:form id="from"位于错误的位置。你应该把它移到<p:layoutUnit position="west"：

里面

<p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
    <h:form id="form">
        <p:tree id="tree"  value="#{treeBean.root}" selection="#{treeBean.selectedNode}"  var="node" selectionMode="single" dynamic="true"  cache="false" >
            <p:ajax listener="#{treeBean.onNodeSelect}" update=":myForm" event="select"/>
            <p:treeNode>
                <h:outputText value="#{node}"/>
            </p:treeNode>
        </p:tree>
    </h:form>
</p:layoutUnit>

另请考虑使用h:panelGroup代替<h:form id="myForm"并更新小组，因为您不需要h:form：

<p:layoutUnit position="center">
    <h:panelGroup id="centerContentPanel">
        <ui:include src="${treeBean.selectedNode.name}.xhtml"/>
    </h:panelGroup>
</p:layoutUnit>

并更新该小组：

<p:ajax listener="#{treeBean.onNodeSelect}" update="centerContentPanel" event="select"/>

Answer 2

你还没有理解，你没有注意到我在previous question中对你所说的话。您不会尝试更新整个layoutUnit。而是更新layoutUnit中的表单，或者再次更新该表单中的面板，该面板包含您要更新的数据。在这种情况下，您的代码将是：

<h:body>
    <h:form id="form">
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100"  resizable="false" closable="false" collapsible="false">
                <h:outputText value="Top" />
            </p:layoutUnit>
            <p:layoutUnit position="south" size="100" resizable="flase" closable="false" collapsible="false">
                <h:outputText value="Bottom" />
            </p:layoutUnit>
            <p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
                <p:tree id="tree"  value="#{treeBean.root}" selection="#{treeBean.selectedNode}"  var="node" selectionMode="single" dynamic="true"  cache="false" >
                    <p:ajax listener="#{treeBean.onNodeSelect}" update=":myForm" event="select"/>
                    <p:treeNode>
                        <h:outputText value="#{node}"/>
                    </p:treeNode>
                </p:tree>
            </p:layoutUnit>
            <p:layoutUnit position="center">
              <h:form id="myForm">
                <ui:include src="${treeBean.selectedNode.name}.xhtml"/>
                <!-- Pay attention that inside the above xhtml page you don't have to have a form element -->
              </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>

p：layoutUnit内容在p：tree节点选择上没有变化

2 个答案: