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)。
在此示例中,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生成的。最终版本应尽快发布!
翻译自: https://www.javacodegeeks.com/2014/11/primefaces-5-0-datatable-column-toggler.html
primefaces