如何启用PrimeFaces中的步骤组件的按钮

Question

几周前，我开始与一家新公司的搭档，他们正在使用 PrimeFaces 使用 Java EE 。我对Java或Primefaces不太了解，所以我有点丢失(就像我的英语一样(。

他们要求我制作步骤组件，但是组件无法按照他们的需求工作。他们需要该组件在单击下一步时不会禁用您的位置，我的意思是，如果您处于第四步，他们也希望让它启用，即使您向后移动。

我试图使其有效地将可读属性更改为false，使用一些带有某些变量的JavaScript启用链接(但这会使我的Proyect崩溃(，请使用我使用的Java EE来更改java ee.ui-step-number，但不适用于链接...

<p:steps widgetVar="steps" id="steps" readonly="false" activeIndex="#{actemplate.seccionRenovacion}" style="border: none; height: auto; width: 100%; font-weight: bold;">                                                                
    <p:menuitem id="menu_step1" class="menuItemRenewal" value="#{texto['ac_menu_step1']}" style="color:  #{actemplate.pasoRenovacion gt 1 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step2" class="menuItemRenewal" value="#{texto['ac_menu_step2']}" outcome="tratamientos" style="color:  #{actemplate.pasoRenovacion gt 2 ? 'green;' : ''}"/>                                    
    <p:menuitem id="menu_step3" class="menuItemRenewal" value="#{texto['ac_menu_step3']}" outcome="personal" style="color:  #{actemplate.pasoRenovacion gt 3 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step4" class="menuItemRenewal" value="#{texto['ac_menu_step4']}" outcome="encargados" style="color:  #{actemplate.pasoRenovacion gt 4 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step5" class="menuItemRenewal" value="#{texto['ac_menu_step5']}" outcome="sitios_web" style="color:  #{actemplate.pasoRenovacion gt 5 ? 'green;' : ''}"/>                                         
</p:steps>

---

当您进入下一步时，您可以单击以前的步骤，但是当您的页面更改时，您无法直接转到您正在工作的页面(如果您在第3页，然后转到第1页，您不能直接转到第3页，您需要再次迈出一步(。

Answer 1

我有解决方案，但是使用 javascript ，我不知道如何使其与Java一起使用，但是我会在这里发布它，因此，如果其他人都有同样的问题，我希望它也适用于您的代码。

<script>        
  var item1 = document.getElementById("menuform:menu_step1");
  var item2 = document.getElementById("menuform:menu_step2");
  var item3 = document.getElementById("menuform:menu_step3");
  var item4 = document.getElementById("menuform:menu_step4");
  var item5 = document.getElementById("menuform:menu_step5");
  // Step 1
  if(#{actemplate.pasoRenovacion} >= 1){
    item1.setAttribute("href", "mi_entidad.xhtml");
    item1.setAttribute("onclick", true);
    item1.style.cursor = "pointer";
    // Step 2
    if(#{actemplate.pasoRenovacion} >= 2){
      item2.setAttribute("href", "tratamientos.xhtml");
      item2.setAttribute("onclick", true);
      item2.style.cursor = "pointer";
      // Step 3
      if(#{actemplate.pasoRenovacion} >= 3){
        item3.setAttribute("href", "personal.xhtml");
        item3.setAttribute("onclick", true);
        item3.style.cursor = "pointer";
        // Step 4
        if(#{actemplate.pasoRenovacion} >= 4){
          item4.setAttribute("href", "encargados.xhtml");
          item4.setAttribute("onclick", true);
          item4.style.cursor = "pointer";
          // Step 5
          if(#{actemplate.pasoRenovacion} >= 5){
            item5.setAttribute("href", "sitios_web.xhtml");
            item5.setAttribute("onclick", true);
            item5.style.cursor = "pointer";          
          }
        }
      }
    }
  }
</script>

因此，首先，我用对象' steps '的所有元素制作 variable 。它还必须与 jQuery 一起使用，但是公司没有实施，因此我与 dom 。

一起工作

之后，我从 bean 中捕获了 Java变量，当您传递到下一步时，它将一对一添加。由于我们有，您可以简单地"如果"(我使用它嵌套(。

最后，您可以将想要的属性设置为元素。我设置了href和click event(，两个是重要的，因为"步骤"元素将 href更改为＃，而单击事件到false <</strong>，当您不通过步骤时，随着该更改，您现在可以单击您目前的步骤，或者如果您转到阶跃上一个步骤(，并将样式赋予光标，以使外观就像您在链接上一样。