Question

我正在尝试呈现以下JSF页面：

<h:form id="form" prependId="false">
    <h:panelGrid width="100%">
        <h:panelGroup id="tableDiv" layout="block">
            <h:panelGroup layout="block" style="text-align: center;">
                <p:dataTable id="table" var="_item" 
                        value="#{primeBean.findTableModel()}">
                        ...
                </p:dataTable>
            </h:panelGroup>
        </h:panelGroup>
        <h:panelGrid columns="2" width="100%">
            <h:panelGroup id="barChartDiv" layout="block">
                <p:barChart id="barChart"
                    value="#{primeBean.findCartesianModel()}">
                    <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
                            update="pieChartDiv,tableDiv" />
                </p:barChart>
            </h:panelGroup>
            <h:panelGroup id="pieChartDiv" layout="block">
                <h:panelGroup layout="block">
                    <p:pieChart id="pieChart">
                        <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
                                update="tableDiv" />
                    </p:pieChart>
                </h:panelGroup>
            </h:panelGroup>
        </h:panelGrid>
    </h:panelGrid>
</h:form>

当我点击p:barChart上的任何栏时，我希望更新属性中的组件将按照我声明(pieChartDiv,tableDiv)的顺序呈现，但它们以相反的顺序呈现{{1 }}

这是正常行为吗？如何按声明项目的顺序更新组件列表？

Answer 1

这种方式不可能。搜索和更新组件的顺序与JSF组件树中显示的顺序完全相同。

一种方法是重新排列/交换树层次结构中的两个组件，并借助CSS在视觉上重新定位它们。然而，这是相当笨拙的。

另一种方法是在完成第一个组件的更新时更新第二个组件（因此有效地结束了2个ajax请求而不是1个）。您可以在<p:remoteCommand>的帮助下实现这一目标，该{{3}}会在完成<p:ajax>时调用。

所以，而不是

<p:ajax ... update="pieChartDiv,tableDiv" />

使用

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />

Answer 2

从我所看到的......您声明组件的顺序如下：

<h:panelGroup id="tableDiv" layout="block"> (1º component)
            ...
        </h:panelGroup>
        <h:panelGrid columns="2" width="100%">(2º component)
            <h:panelGroup id="barChartDiv" layout="block">
                ...
            </h:panelGroup>
            <h:panelGroup id="pieChartDiv" layout="block">

            </h:panelGroup>
        </h:panelGrid>
    </h:panelGrid>

“barChartDiv”和“pieChartDiv”都是第二个组件

Answer 3

不是那么优雅，但工作解决方案可以是这样的：

<p:barChart id="barChart" 
    value="#{primeBean.findCartesianModel()}">
    <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
        update="pieChartDiv" /> <!-- This will be updated as first. -->
    <p:ajax event="itemSelect" 
        update="tableDiv" /> <!-- And this will be updated as second. -->
</p:barChart>

如何使用p：ajax按顺序更新多个组件

3 个答案: