jsf - 如何通过从 jsf2.0 和 primefaces 2.2 的下拉菜单中选择值来显示隐藏数据表

Question

我有一个下拉菜单，从下拉菜单中选择一个特定的值，我必须显示一个与之对应的数据表，并从下拉菜单中选择第二个，值前一个数据表应该隐藏和数据表对应于第二个值应该填充等等这是我的代码:

   <h:selectOneMenu value="#{bean.value}"
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
style="width:100px;">
<f:selectItem itemLabel="Select" itemValue="Select" />
<f:selectItem itemLabel="5" itemValue="5" id="mySelectedValue1" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="6" itemValue="6" id="mySelectedValue2" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="7" itemValue="7" id="mySelectedValue3" onclick="hideOrShow(??);"/>    
    </h:selectOneMenu> 


<script type="text/javascript">   
function hideOrShow(show) {
var obj = document.getElementById("myForm:myPanel");
     if (show) { 
        obj.style.display = "block";
     }
 else {
         obj.style.display = "none"; 
    } 
  } </script> 


<h:panelGrid id="myPanel" columns="2"> 
    ... 
</h:panelGrid> 

我的问题是将什么作为参数放入 HideOrShow() 中，显示为 ??这样java脚本函数就会识别它。以及最初如何隐藏所有数据表？

谢谢:好奇

Answer 1

由于 JSF 状态管理的工作方式，将纯 JS 与 JSF 结合使用通常会带来麻烦和不直观。您应该更喜欢使用纯 JSF 来解决问题。它通常也会以更简单的 View 结束。您可以使用 JSF 提供的 <f:ajax>为此特定目的结合 rendered要显示/隐藏的组件属性。

启动示例:

<h:form>
    <h:selectOneMenu value="#{bean.value}">
        <f:selectItem itemLabel="Select" itemValue="#{null}" />
        <f:selectItem itemLabel="5" itemValue="5" />
        <f:selectItem itemLabel="6" itemValue="6" />
        <f:selectItem itemLabel="7" itemValue="7" />
        <f:ajax render="tables" />
    </h:selectOneMenu> 

    <h:panelGroup id="tables">
        <h:dataTable value="#{bean.list5}" rendered="#{bean.value == 5}">
            ...
        </h:dataTable>
        <h:dataTable value="#{bean.list6}" rendered="#{bean.value == 6}">
            ...
        </h:dataTable>
        <h:dataTable value="#{bean.list7}" rendered="#{bean.value == 7}">
            ...
        </h:dataTable>
    </h:panelGroup>
</h:form>

只要表本身包含输入组件，请确保 bean 在 View 范围内。