4

次の 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)が、それらは逆の順序でレンダリングされます(tableDiv,pieChartDiv)。

これは正常な動作ですか？項目が宣言されている順序でコンポーネント リストを更新するにはどうすればよいですか?

4

2 に答える 2

11

このままでは無理です。コンポーネントは、JSF コンポーネント ツリーに表示される順序とまったく同じ順序で検索および更新されます。

1 つの方法は、ツリー階層内の両方のコンポーネントを再配置/交換し、CSS を使用して視覚的に再配置することです。ただし、これはやや不器用です。

もう 1 つの方法は、1 番目のコンポーネントの更新が完了した時点で 2 番目のコンポーネントを更新することです (したがって、1 つではなく 2 つの ajax リクエストで効果的に終了します)。<p:remoteCommand>の完了時に呼び出されるの助けを借りてそれを達成できます<p:ajax>。

だから、代わりに

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

使用する

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />
于 2013-03-19T13:52:59.090 に答える
1

それほどエレガントではありませんが、実用的なソリューションは次のとおりです。

<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>
于 2014-02-10T22:19:07.703 に答える