如何使用p:ajax按顺序更新几个组件 [英] How to use p:ajax to update several components in order

问题描述

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

I'm trying to render the following JSF page:

<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上的任何栏中时，我希望update属性中的组件将按照我声明(pieChartDiv,tableDiv)的顺序呈现，但它们以相反的顺序(tableDiv,pieChartDiv)呈现.

When I click in any bar on p:barChart, I expect that the components in the update attribute would be rendered in the order that I declare (pieChartDiv,tableDiv), but they are rendered in reverse order (tableDiv,pieChartDiv).

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

Is this normal behavior? How can I update a component list in the order the items are declared?

推荐答案

这种方式是不可能的.组件的搜索和更新顺序与JSF组件树中出现的顺序完全相同.

That's not possible this way. The components are searched and updated in exactly the same order as they appear in the JSF component tree.

一种方法是重新排列/交换树层次结构中的两个组件，并借助CSS在视觉上重新放置它们.但是，这很笨拙.

One way would be to rearrange/swap the both components in the tree hierarchy and reposition them visually with help of CSS. This is however rather clumsy.

另一种方法是在完成对第一个组件的更新后更新第二个组件(因此实际上以2个ajax请求而不是1个结束).您可以在 <p:remoteCommand> 的帮助下完成此任务， <p:ajax>.

Another way would be to update the 2nd component on complete of the update of the 1st component (and thus effectively end up with 2 ajax requests instead of 1). You can achieve that with help of <p:remoteCommand> which is invoked on complete of the <p:ajax>.

所以，而不是

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

使用

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

这篇关于如何使用p:ajax按顺序更新几个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！