如何通过从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来解决问题.它也常常以更简单的视图结束.您可以将<f:ajax>为此特定目的提供的JSF 与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在视图范围内.