XML 元素

基本用法

组件的 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_CHART、BAR_CHART、COL_HEATMAP、HEATMAP、HORIZONTAL_BAR_CHART、HORIZONTAL_STACKED_BAR_CHART、LINE_CHART、ROW_HEATMAP、SCATTER_CHART、STACKED_BAR_CHART、TABLE_BAR_CHART、TABLE、TREEMAP、TSV_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

addCellClickListener 为 PivotTable 添加单元格点击事件监听器。CellClickEvent 事件只在表格渲染器触发（TABLE、HEATMAP、TABLE_BAR_CHART、COL_HEATMAP、ROW_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

addRefreshListener 为 PivotTable 添加刷新事件监听器。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 事件中有下列值可用：aggregation、aggregationProperties、columns、columnOrder、exclusions、inclusions、renderer、rowOrder、rows。

本页是否有帮助?

感谢您的反馈

出问题啦~