PrimeFaces 5.0 DataTable列切换器

最新推荐文章于 2020-07-21 17:28:07 发布

dnc8371

最新推荐文章于 2020-07-21 17:28:07 发布

阅读量154

点赞数

文章标签： python 数据分析小程序物联网项目管理 ViewUI

我有机会与PrimeFaces 5.0 DataTable一起工作，并且增强功能很棒。今天，我只想展示其中的一项新功能……DataTable列切换器。此功能使您可以通过复选框列表选择显示哪些列。

要使用列切换器，只需添加一个commandButton即可将列选择的选择列表显示到表的标题中，如下所示：

<p:commandButton icon="ui-icon-calculator" 
   id="toggler" style="float: right;" type="button" value="Columns"/>

接下来，将columnToggler组件添加到表头，并指定DataTable ID作为数据源。在这种情况下，DataTable ID为“数据列表”：

<p:columnToggler datasource="datalist" trigger="toggler"/>

而已！最后，将一个按钮添加到表的标题，该按钮使用户可以指定要显示的列（图1）。

图1：实际的列切换器

在此示例中，DataTable的完整源代码清单如下：

<p:dataTable id="datalist" paginator="true" rowkey="#{item.id}"
     rows="10" rowsperpagetemplate="10,20,30,40,50" 
     selection="#{poolController.selected}" selectionmode="single"
     value="#{poolController.items}" var="item" widgetvar="poolTable">

    <p:ajax event="rowSelect"
      update="createButton viewButton editButton deleteButton"/>

    <p:ajax event="rowUnselect"
      update="createButton viewButton editButton deleteButton"/>

    <f:facet name="header">
       <p:commandButton icon="ui-icon-calculator" id="toggler"
           style="float: right;" type="button" value="Columns"/>
       <p:columnToggler datasource="datalist" trigger="toggler"/>
       <div style="clear:both" />
    </f:facet>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_id}"/>
        </f:facet>
        <h:outputText value="#{item.id}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_style}"/>
        </f:facet>
        <h:outputText value="#{item.style}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_shape}"/>
        </f:facet>
        <h:outputText value="#{item.shape}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_length}"/>
        </f:facet>
        <h:outputText value="#{item.length}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_width}"/>
        </f:facet>
        <h:outputText value="#{item.width}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_radius}"/>
        </f:facet>
        <h:outputText value="#{item.radius}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_gallons}"/>
        </f:facet>
        <h:outputText value="#{item.gallons}"/>
    </p:column>
    <f:facet name="footer">
        <p:commandButton id="createButton" icon="ui-icon-plus"
            value="#{bundle.Create}"
            actionListener="#{poolController.prepareCreate}"
            update=":PoolCreateForm"
            oncomplete="PF('PoolCreateDialog').show()"/>
        <p:commandButton id="viewButton"   icon="ui-icon-search"
            value="#{bundle.View}" update=":PoolViewForm"
            oncomplete="PF('PoolViewDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="editButton"   icon="ui-icon-pencil" 
            value="#{bundle.Edit}" update=":PoolEditForm"
            oncomplete="PF('PoolEditDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="deleteButton" icon="ui-icon-trash" 
            value="#{bundle.Delete}"
            actionListener="#{poolController.destroy}"
            update=":growl,datalist"
            disabled="#{empty poolController.selected}"/>
    </f:facet>
</p:dataTable>

PrimeFaces 5.0祝您编程愉快！此示例是使用PrimeFaces 5.0 RC 2生成的。最终版本应尽快发布！