XML 元素

基本用法

sample pivot table

组件的 XML 名称:pivotTable

在界面 XML 中定义组件的示例:

<pivot:pivotTable id="pivotTable"
                  dataContainer="tipsDc"
                  height="100%"
                  width="100%"
                  renderer="HEATMAP">
    <pivot:renderers>
        <pivot:renderer type="AREA_CHART"/>
    </pivot:renderers>
    <pivot:properties>
        <pivot:property name="totalBill"/>
        <pivot:property name="tip"/>
        <pivot:property name="sex"/>
        <pivot:property name="smoker"/>
        <pivot:property name="day"/>
        <pivot:property name="time"/>
        <pivot:property name="size"/>
    </pivot:properties>
    <pivot:aggregation mode="SUM_OVER_SUM">
        <pivot:property name="tip"/>
        <pivot:property name="totalBill"/>
    </pivot:aggregation>
    <pivot:columns>
        <pivot:column value="day"/>
        <pivot:column value="time"/>
    </pivot:columns>
    <pivot:rows>
        <pivot:row value="sex"/>
        <pivot:row value="smoker"/>
    </pivot:rows>
    <pivot:sortersFunction>
        function(attr){
            if(attr=="Day"){
                return $.pivotUtilities.sortAs(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
            }
        }
    </pivot:sortersFunction>
</pivot:pivotTable>

pivotTable 属性

  • dataContainer - 设置一个数据容器,容器在界面 XML 描述的 data 部分定义,且必须是 collectionDataContainer 类型。

  • editable - 如果是 true,UI 会显示用来操作数据的元素,否则只显示数据。

  • menuLimit - 设置双击显示菜单的最大数量。如果记录数大于这个值,则会显示相应的信息。只对 可编辑pivotTable 有效。

  • renderer - 启用设置一个预制的数据渲染器。只对非 可编辑 pivotTable 有效。

  • showColTotals - 定义是否显示列总数。默认值是 true。只对表格渲染器有效。

  • showRowTotals - 定义是否显示行总数。默认值是 true。只对表格渲染器有效。

  • showUI - 控制是否在可编辑的透视表中显示 UI 元素。默认值是 true

  • autoSortUnusedProperties - 定义在 UI 是否要对未使用的属性进行排序。只对 可编辑pivotTable 有效。

  • unusedPropertiesVertical - 定义未使用的属性是要以垂直方式展示(true)还是以水平方式展示(false 或者默认情况)。如果设置为数字,那么当属性名称的字符组合长度超过此数字,则属性将垂直显示。

pivotTable 元素

properties

pivotTable 内使用的一组属性的键值对映射。键是 数据容器 中属性的名称,值是本地化标题。

derivedProperties

可以向原始数据容器添加新属性,这些属性派生自现有属性。此元素是键值映射,其中键是生成的属性的名称,值是生成此属性的 JavaScript 函数。

  • 元素内部的 derivedProperty 元素需要定义 caption 属性,此属性的值会被当作键值使用。

  • function 元素用作 derivedProperty 的值。

hiddenProperties

不需要展示在 UI 的一组属性。该属性值可以设置为 properties 的键值或者生成属性的名称(比如 derivedProperties 的键值)。

该属性只对 可编辑的 pivotTable 有效。

hiddenFromAggregations

不在 聚合 参数下拉框显示的一组属性。

hiddenFromDragDrop

不在 UI 可拖放部分显示的一组属性。

columns

用作表格列的一组属性。该属性值可以设置为 properties 的键值或者生成属性的名称。

columnOrder

Renderer 使用的列数据展示顺序。

rows

用作表格行的一组属性。该属性值可以设置为 properties 的键值或者生成属性的名称。

rowOrder

Renderer 使用的行数据展示顺序。

exclusions

键值映射,其中键是属性的名称(properties 键值或生成的属性的名称),值是要在渲染时不包括的属性值列表。

该属性只对 可编辑的 pivotTable 有效。

inclusions

键值映射,其中键是属性的名称(properties 键值或生成的属性的名称),值是要渲染的属性值列表。

该属性只对 可编辑的 pivotTable 有效。

filterFunction

JavaScript 函数,用来做过滤。

renderers

定义渲染函数的集合,这个集合需要在 UI 中的可用渲染器列表中显示。

  • default 属性用来设置一个默认的渲染器。当组件加载时,选择的渲染器会当作默认的使用。

  • 内部的 renderer 元素可以使用 type 属性来设置一个预制的渲染器:AREA_CHARTBAR_CHARTCOL_HEATMAPHEATMAPHORIZONTAL_BAR_CHARTHORIZONTAL_STACKED_BAR_CHARTLINE_CHARTROW_HEATMAPSCATTER_CHARTSTACKED_BAR_CHARTTABLE_BAR_CHARTTABLETREEMAPTSV_EXPORT

该属性只对 可编辑的 pivotTable 有效。

rendererOptions

定义渲染器的参数。事实上只有两种渲染器能做自定义设置:

  • 所有 heatmap 渲染器。可以通过 JavaScript 代码设置热力单元的颜色。

  • 所有 chart 渲染器。参数可以用来设置图表的大小。

sortersFunction

JavaScript 函数,用来做行和列标题的排序。

pivotTable 的聚合元素

aggregation

设置聚合函数,用来对每个单元格的结果做聚合运算。

aggregation 的属性

  • mode - 属性可以用来设置一个预制的聚合函数。

  • caption - 展示在 UI 的本地化语言的描述。

  • custom - 如果是 true,那么会忽略 mode 的值,而使用内部的 function 元素指定的 JavaScript 函数。

aggregation 的内部元素

  • function - 包含聚合函数的 JavaScript 代码。

  • property - 用作聚合函数输入参数的属性列表。该属性值可以设置为 properties 的键值或者生成属性的名称。只对非 editable pivotTable 有效。

    <pivot:aggregation mode="SUM_OVER_SUM" custom="true">
        <pivot:property name="tip"/>
        <pivot:property name="totalBill"/>
    </pivot:aggregation>

aggregationProperties

定义在聚合器的下拉列表中显示的属性列表。该属性值可以设置为 properties 的键值或者生成属性的名称。该属性只对 可编辑的 pivotTable 有效。

<pivot:aggregationProperties>
    <pivot:property name="tip"/>
    <pivot:property name="totalBill"/>
</pivot:aggregationProperties>

aggregations

定义需要在 UI 中的可用聚合器下拉列表中显示的聚合器集合。

aggregations 的属性:

  • default 属性用来设置一个预制的聚合函数。当组件加载时,选择的函数会当作默认的使用。

  • 内部的 aggregation 元素跟 aggregation 的使用方法相同,除了内部的 property 元素。该属性只对<< editable,可编辑的>> pivotTable 有效。

<pivot:aggregations default="SUM_OVER_SUM">
    <pivot:aggregation caption="Count"/>
    <pivot:aggregation mode="SUM_OVER_SUM"/>
</pivot:aggregations>

Listeners

CellClickListener

addCellClickListenerPivotTable 添加单元格点击事件监听器。CellClickEvent 事件只在表格渲染器触发(TABLEHEATMAPTABLE_BAR_CHARTCOL_HEATMAPROW_HEATMAP)。

@Autowired
private PivotTable pivotTable;

@Autowired
private Notifications notifications;

@Subscribe
public void onInit(InitEvent initEvent) {
    pivotTable.addCellClickListener(event -> {
        notifications.create().withCaption("Value: " + event.getValue() + ",\n"
                + "Filters applied: " + event.getFilters())
                .show();
    });
}

RefreshListener

addRefreshListenerPivotTable 添加刷新事件监听器。RefreshEvent 事件只在 可编辑PivotTable 触发。

@Autowired
private PivotTable pivotTable;

@Autowired
private Notifications notifications;

@Subscribe
public void onInit(InitEvent initEvent) {
    pivotTable.addRefreshListener(event -> {
        notifications.create().withCaption("Row order :" + event.getRowOrder() + ",\n"
                + "Inclusions: " + event.getInclusions())
                .show();
    });
}

RefreshEvent 事件中有下列值可用:aggregationaggregationPropertiescolumnscolumnOrderexclusionsinclusionsrendererrowOrderrows