<p:dataTable> 动态显示或隐藏

Question

我在一个页面中有多个数据表，每个数据表都是单独的形式，我只想在用户希望通过选中复选框查看该数据表时显示数据表。下面是代码：

--编辑-- 显示.xhtml

    <h:form>
  <p:selectManyCheckbox value="#{salesMB.selectedItems}">
          <f:selectItems value="#{salesMB.availableItems}" />
          <p:ajax update=":salesForm :workForm" />  
 </p:selectManyCheckbox>

    </h:form>
    <!--dataTable which shows Sales status -->
    <h:form id="salesForm">

     <p:dataTable id="salesID" var="salesInfo" value="#{salesMB.salesInfoList}" widgetVar="widgetSalesInfo"
                resizableColumns="true" emptyMessage="No records found with given criteria">

    <f:facet name="header">  
                <h:outputText value="Sales Status"/>
     </f:facet>  

    <p:column id="salesport" sortBy="saID" headerText="SalesReport" >  
                <h:outputText value="#{salesInfo.report}" />
            </p:column>
    ....
    ...
    </p:dataTable>

    </h:form>

    <!--dataTable which shows workstatus -->
    <h:form id="workForm">

      <p:dataTable id="orderID" var="orderInfo" value="#{salesMB.orderInfoList}" widgetVar="widgetOrderInfo"
                resizableColumns="true" emptyMessage="No records found with given criteria">

    <f:facet name="header">  
                <h:outputText value="Work Status"/>
      </f:facet>  

    <p:column id="orderp" sortBy="ordID" headerText="ordReport" >  
                <h:outputText value="#{salesInfo.order}" />
            </p:column>
    ....
    ...
    </p:dataTable>

    </h:form>

SalesManagedBean：

    @ManagedBean(name = "salesMB")
    @ViewScoped
    public class SalesManagedBean implements Serializable {
   private List<String> selectedItems;
        /**
     * @return the selectedItems
     */
    public List<String> getSelectedItems() {
        return selectedItems;
    }

    /**
     * @param selectedItems the selectedItems to set
     */
    public void setSelectedItems(List<String> selectedItems) {
        this.selectedItems = selectedItems;
    }

    ..
    }

当我选择带有标签“销售状态”的复选框时，带有标题“销售状态”的数据表应该对用户可见，类似地，当未选中带有标签“销售状态”的复选框时，标题“销售状态”的数据表应该被隐藏。当我选择多个复选框时，映射的多个表单应该是可见的。我如何动态实现这一点，选择框数据表的 onchange 应该隐藏或可见。请建议。

Answer 1

<h:form>
     <p:selectOneRadio  value="#{salesMB.selectedBox}">
            <f:selectItem itemValue="1" itemLabel="Sales Status" />
            <f:selectItem itemValue="2" itemLabel="Work Status" />
            <f:selectItem itemValue="3" itemLabel="Number1 - 3" />
            <p:ajax update=":salesForm :workStatusForm" />
     </p:selectOneRadio>    
</h:form>
<h:form id="salesForm">
         <!--dataTable which shows Sales status -->
    <p:dataTable id="salesID" rendered="#{salesMB.selectedBox == '1'}" var="salesInfo" value="#{salesMB.salesInfoList}" >
    </p:dataTable>
</h:form>
<h:form id="workStatusForm">
        <!--dataTable which shows workstatus -->
    <p:dataTable id="orderID" rendered="#{salesMB.selectedBox == '2'}" var="orderInfo" value="#{salesMB.orderInfoList}" >
    </p:dataTable>
</h:form>

上面这个是你的 xhtml 文件的样子。保留托管 bean 类。希望对你有帮助。