与 Svelte 集成
本文假设您已熟悉 Svelte 的基本概念和模式。如需回顾，请参阅 Svelte 文档。
DHTMLX Pivot 可作为普通组件与 Svelte 集成。完整的可运行示例请参见 GitHub 上的 Svelte Pivot 演示。
创建项目
以下命令将运行 Vite 项目脚手架工具，并允许您选择 Svelte 模板：
npm create vite@latest
将项目命名为 my-svelte-pivot-app。
安装依赖
切换至新建的项目目录：
cd my-svelte-pivot-app
使用包管理器安装依赖并启动开发服务器：
- 使用 yarn：
yarn
yarn start # 或：yarn dev
- 使用 npm：
npm install
npm run dev
应用将在本地端口运行（例如 http://localhost:3000）。
创建 Pivot
将 Pivot 包添加到项目中，然后将 Pivot 封装为 Svelte 组件。
第一步：安装包
下载 Pivot 试用包 并按照 README 中的步骤操作。试用版 Pivot 包有效期为 30 天。
第二步：创建组件
创建一个挂载 Pivot 的 Svelte 组件。新建文件 src/Pivot.svelte。
导入源文件
打开 src/Pivot.svelte 并导入 Pivot 源文件。导入路径取决于包的版本：
- PRO 版本（从本地文件夹安装）：
<script>
import { Pivot } from 'dhx-pivot-package';
import 'dhx-pivot-package/dist/pivot.css';
</script>
如果包附带压缩资源，请将 pivot.css 替换为 pivot.min.css。
- 试用版本：
<script>
import { Pivot } from '@dhx/trial-pivot';
import '@dhx/trial-pivot/dist/pivot.css';
</script>
本教程使用 Pivot 的试用版本。
设置容器 并挂载 Pivot
要在页面上显示 Pivot，请添加一个容器 div，然后在 onMount 生命周期钩子中使用构造函数初始化 Pivot，并在 onDestroy 钩子中销毁 Pivot。
以下代码片段定义了一个最简 Pivot Svelte 组件：
<script>
import { onMount, onDestroy } from "svelte";
import { Pivot } from "@dhx/trial-pivot";
import "@dhx/trial-pivot/dist/pivot.css";
let container; // Pivot 的容器引用
let table;
onMount(() => {
// 初始化 Pivot 组件
table = new Pivot(container, {});
});
onDestroy(() => {
table.destructor(); // 卸载时销毁 Pivot
});
</script>
<div bind:this={container} class="widget"></div>
添加样式
要使 Pivot 正确渲染，请将以下样式添加到项目的主 CSS 文件中：
/* 初始页面的样式 */
html,
body,
#app { /* 使用 #app 根容器 */
height: 100%;
padding: 0;
margin: 0;
}
/* Pivot 容器的样式 */
.widget {
height: 100%;
width: 100%;
}
加载数据
要向 Pivot 传入数据，请准备一个数据集。创建 src/data.js 并导出数据和字段元数据：
export function getData() {
const dataset = [
{
"cogs": 51,
"date": "10/1/2018",
"inventory_margin": 503,
"margin": 71,
"market_size": "Major Market",
"market": "Central",
"marketing": 46,
"product_line": "Leaves",
"product_type": "Herbal Tea",
"product": "Lemon",
"profit": -5,
"sales": 122,
"state": "Colorado",
"expenses": 76,
"type": "Decaf"
},
{
"cogs": 52,
"date": "10/1/2018",
"inventory_margin": 405,
"margin": 71,
"market_size": "Major Market",
"market": "Central",
"marketing": 17,
"product_line": "Leaves",
"product_type": "Herbal Tea",
"product": "Mint",
"profit": 26,
"sales": 123,
"state": "Colorado",
"expenses": 45,
"type": "Decaf"
}, // 其他数据项
];
const fields = [
{
"id": "cogs",
"label": "Cogs",
"type": "number"
},
{
"id": "date",
"label": "Date",
"type": "date"
}, // 其他字段
];
return { dataset, fields };
};
打开 src/App.svelte，导入数据并将其作为 props 传递给新的 <Pivot/> 组件：
<script>
import Pivot from "./Pivot.svelte";
import { getData } from "./data.js";
const { fields, dataset } = getData();
</script>
<Pivot fields={fields} dataset={dataset} />
打开 src/Pivot.svelte，使用 export let 声明传入的 props，并将其应用到 Pivot 配置对象中：
<script>
import { onMount, onDestroy } from "svelte";
import { Pivot } from "@dhx/trial-pivot";
import "@dhx/trial-pivot/dist/pivot.css";
export let fields;
export let dataset;
let container;
let table;
onMount(() => {
table = new Pivot(container, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // 其他值
]
},
// 其他配置属性
});
});
onDestroy(() => {
table.destructor();
});
</script>
<div bind:this={container} class="widget"></div>
组件现已准备好使用。挂载时，Pivot 将使用所提供的数据进行渲染。完整的配置属性列表请参见 Pivot API 文档。
处理事件
用户在 Pivot 中的操作会触发可订阅的事件。完整的事件列表请参见 事件概览。
以下代码片段在 onMount 中扩展了一个 open-filter 事件监听器，当用户打开筛选器时记录字段 ID：
<script>
// ...
let table;
onMount(() => {
table = new Pivot(container, {
fields,
data: dataset,
config: {
rows: ["state", "product_type"],
columns: ["product_line", "type"],
values: [
{
field: "profit",
method: "sum"
}, // 其他值
]
},
// 其他配置属性
});
table.api.on("open-filter", (ev) => {
console.log("激活筛选器的字段 id：", ev.id);
});
});
onDestroy(() => {
table.destructor();
});
</script>
// ...
启动应用，即可看到 Pivot 在页面上渲染数据。
Pivot 现已与 Svelte 集成完成。您可以根据项目需求自定义配置。完整 示例请参见 GitHub 上的 svelte-pivot-demo。