Статьи

PrimeFaces 5.0 DataTable Столбец Toggler

Декабрь 13, 2018

У меня была возможность немного поработать с DataFable PrimeFaces 5.0, и улучшения — это здорово. Сегодня я хотел показать только одну из новых функций — переключатель столбца DataTable. Эта функция позволяет выбрать, какие столбцы будут отображаться с помощью списка флажков.

Чтобы использовать переключатель столбцов, просто добавьте commandButton для отображения списка выбора вариантов столбцов в заголовок таблицы следующим образом:

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

Затем добавьте компонент columnToggler в заголовок таблицы и укажите ID DataTable в качестве источника данных. В этом случае ID DataTable является «списком данных»:

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

Это оно! В конце к заголовку таблицы добавляется кнопка, которая позволяет пользователю указать, какие столбцы будут отображаться (рисунок 1).

Рисунок 1: Столбец Toggler в действии

Рисунок 1: Столбец Toggler в действии

Полный список источников для DataTable в этом примере выглядит следующим образом:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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. Финальная версия должна скоро выйти!

Ссылка: Колонка PrimeFaces 5.0 DataTable Toggler от нашего партнера по JCG Джоша Джуно из блога Josh’s Dev Blog — блог Java, Java EE, Jython, Oracle и другие… .
33
Share: