如何通过在jsf2.0和primefaces 2.2中的下拉菜单中选择值来显示隐藏数据表 [英] how to show hide datatables, by selecting values from drop down menu in jsf2.0 and primefaces 2.2

问题描述

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

I am having a drop down menu, on selecting a particular value from a drop down menu, i have to show a datatable corresponding to it and on selecting second from drop down menu ,value the previous data table should hide and the datatable corresponding to second value should populate and so on here are my codes:

   <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> 

我的问题是将什么作为参数放置在显示为Hide的HideOrShow()中?以便Java脚本函数可以识别它.最初如何隐藏所有数据表?

My Question is what to put as parameters in HideOrShow() shown as ?? so that java script function will identify it. And how initially all the datatables will be hidden?

谢谢:好奇

推荐答案

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

Using plain JS in combination with JSF is often recipe for trouble and unintuitiveness because of the way how JSF state management works. You should prefer solving the problem using pure JSF. It will also often end up in a simpler view. You can use the JSF-provided <f:ajax> for this particular purpose in combination with the rendered attribute on the components to show/hide.

开球示例:

<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在视图范围内.

Make sure that the bean is in the view scope whenever the tables contain by itself input components.

这篇关于如何通过在jsf2.0和primefaces 2.2中的下拉菜单中选择值来显示隐藏数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！