<p:datatable>动态显示或隐藏</p:datatable>

时间:2014-06-12 18:15:00

标签: javascript jquery jsf primefaces

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

- EDIT-- show.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;
    }

    ..
    }

当我选择标签为“Sales Status”的复选框时,用户可以看到带有标题“Sales Status”的dataTable,类似地,当标签为“Sales Status”的复选框未选中时,应隐藏带有“Sales Status”标题的数据表。当我选择多个复选框时,应该可以看到映射的多个表单。我如何动态地实现这一点,更改选择框数据表的更改应隐藏或可见。请建议。

1 个答案:

答案 0 :(得分:0)

<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类。我希望它有所帮助。

相关问题