Change Primefaces p:steps activeIndex with Javascript?

Question

我正在考虑使用p:steps组件

<p:steps activeIndex="1" styleClass="custom" readonly="false">
    <p:menuitem value="Personal" url="#"/>
    <p:menuitem value="Seat Selection" url="#"/>
    <p:menuitem value="Payment" url="#"/>
    <p:menuitem value="Confirmation" url="#"/>
</p:steps>

如何用Javascript改变activeIndex ?

Answer 1

通常情况下，您应该能够使用JavaScript API和使用widgetVar属性做到这一点。然而，当我使用widgetVar="stepsVar"时，小部件是未知的(JavaScript控制台):

> PF('stepsVar')
Widget for var 'stepsVar' not available!

所以，恐怕你需要一些变通办法。例如，将索引保存在托管bean中，并使用remoteCommand对其进行更新。

XHTML

<p:remoteCommand name="setStepIndex"
                 action="#{yourBean.setStepIndexByRemoteCommand}"
                 update="steps"/>
<p:steps id="steps"
         activeIndex="#{yourBean.stepIndex}">
    <p:menuitem value="Personal" />
    <p:menuitem value="Seat Selection" />
    <p:menuitem value="Payment" />
    <p:menuitem value="Confirmation" />
</p:steps>
<button onclick="setStepIndex([{name:'index', value:2}]);return false">Test</button>

憨豆

private int stepIndex;
public int getStepIndex()
{
    return stepIndex;
}
public void setStepIndexByRemoteCommand()
{
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> map = context.getExternalContext().getRequestParameterMap();
    String indexString = map.get("index");
    stepIndex = Integer.valueOf(indexString);
}

参见

• 从JavaScript传递参数到p:remoteCommand