初始化

本指南介绍如何在页面上创建 Pivot 并为您的应用程序添加 Pivot 表格功能。请按照以下步骤完成组件的初始化：

在页面中引入 Pivot 源文件。
为 Pivot 创建容器。
使用构造函数初始化 Pivot。

引入源文件

Pivot 应用需要在页面中引入两个源文件。有关下载软件包的说明，请参阅下载软件包。

请引入以下文件：

pivot.js
pivot.css

设置源文件的正确相对路径：

index.html
<script type="text/javascript" src="./dist/pivot.js"></script>  
<link rel="stylesheet" href="./dist/pivot.css">

创建容器

Pivot 渲染到 HTML 容器元素中。添加一个容器并为其指定 ID，例如 "root"：

index.html
<div id="root"></div>

初始化 Pivot

pivot.Pivot 构造函数接受两个参数：

HTML 容器的 ID
包含配置属性的对象

以下代码片段在 "root" 容器中创建一个 Pivot 实例，并设置初始字段、数据和结构：

// 创建 Pivot
const table = new pivot.Pivot("#root", {
    // 配置属性
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: ["title"],
        values: [
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

构造函数返回一个 Pivot 实例。可在返回的实例上调用以下 API 方法：

getTable — 获取底层 Table 组件实例
setConfig — 更新当前 Pivot 配置
setLocale — 为 Pivot 应用新的语言环境
showConfigPanel — 显示或隐藏配置面板

配置属性

Pivot 构造函数接受一个包含配置属性的对象，用于控制数据、布局和行为。

信息

有关配置 Pivot 的完整属性列表，请参阅属性概览。

示例

以下代码片段使用初始数据初始化 Pivot：

引入源文件​

创建容器​

初始化 Pivot​

配置属性​

示例​

引入源文件

创建容器

初始化 Pivot

配置属性

示例