primefaces

我有機(jī)會(huì)與PrimeFaces 5.0 DataTable一起工作，并且增強(qiáng)功能很棒。 今天，我只想展示其中的一項(xiàng)新功能……DataTable列切換器。 通過(guò)此功能，可以通過(guò)復(fù)選框列表選擇顯示哪些列。

要使用列切換器，只需添加一個(gè)commandButton即可將列選擇的選擇列表顯示到表的標(biāo)題中，如下所示：

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

接下來(lái)，將columnToggler組件添加到表頭，并指定DataTable ID作為數(shù)據(jù)源。 在這種情況下，DataTable ID為“數(shù)據(jù)列表”：

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

而已！ 最后，將一個(gè)按鈕添加到表的標(biāo)題，該按鈕使用戶可以指定要顯示的列（圖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生成的。最終版本應(yīng)盡快發(fā)布！

翻譯自: https://www.javacodegeeks.com/2014/11/primefaces-5-0-datatable-column-toggler.html

primefaces

總結(jié)

以上是生活随笔為你收集整理的primefaces_PrimeFaces 5.0 DataTable列切换器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。