primefaces_PrimeFaces 5.0 DataTable列切换器

primefaces

我有机会与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生成的。最终版本应尽快发布！