有哪些使用 DHTMLX 小部件创建 JavaScript 数据透视网格的关键点？

Capterra最新的技术趋势调查将数据管理列为金融企业在采用新软件解决方案时面临的主要挑战之一。现成的工具可能不够灵活，无法满足特定要求。因此，组织考虑投资定制解决方案（如数据透视表）来满足其数据管理和分析需求是合理的。

**DHTMLX**专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的顶级Web应用程序框架。

在本文中，我们将介绍我们的一个新集成演示，包括**++DHTMLX Pivot++**和 Grid。在这里，我们将重点介绍我们的开发团队使用这些小部件创建 JavaScript 数据透视网格时使用的一些技术技巧。

使用 DHTMLX Grid 和 Pivot 制作的 JavaScript Pivot Grid 示例

DHTMLX Grid 是一款流行的JavaScript 数据网格小部件，用于处理表格数据，其最新版本 (9.1) 引入了行扩展器和多重排序等出色的新 PRO 功能。但通过与 **++DHTMLX Pivot++**结合使用，Grid 小部件可以变得更加强大。使用下面的实时示例，您可以方便地在 Grid 和 Pivot 模式之间切换，应用不同的聚合，并动态分析数据。

JavaScript 数据透视表于去年进行了全面改进，通过启用动态数据聚合来比较和分析复杂数据，增强了数据分析能力。这种集成允许最终用户在网格视图和数据透视视图中的原始表格数据之间无缝切换，在数据透视视图中，信息可以轻松组织成有效决策所需的有意义的摘要。

将 DHTMLX Grid 与 Pivot 集成时需要考虑的关键点

现在，让我们重点介绍将这些 DHTMLX 小部件集成到单个枢轴网格解决方案中的主要方面。除了将 DHTMLX 组件包含在项目中并初始化它们等常见事项的细节之外，我们将重点关注更具挑战性的任务。

在网格模式和枢轴模式之间切换

在这些模式之间切换涉及动态初始化和销毁相应小部件的实例，同时保留配置。convertAndInit(state, save)函数负责此转换。

当切换到 Pivot 模式（state === 1）时，Grid 将被破坏，并且 Pivot 表将使用存储或默认设置进行初始化。

复制代码

grid.destructor();
pivotWidget = new pivot.Pivot("#grid-pivot", {
    fields: storedPivotFields || [],
    config: storedPivotConfig || {},
    data: dataset,
});

当切换回网格模式（state===0）时，Pivot 将被破坏，并且网格将使用之前保存的设置重新出现：

复制代码

pivotWidget.destructor();
grid = new dhx.Grid("grid-pivot", storedGridConfig);

这种方法可以防止内存泄漏，并避免同时运行同一组件的多个实例。

此外，displayButtons函数可确保为每种模式显示适当的 UI 按钮：

复制代码

function displayButtons(state) {
    document.getElementById("edit-button").style.display = state === 1 ? "none" : "block";
    document.getElementById("aux-buttons").style.display = state === 1 ? "flex" : "none";
}

动态处理数据类型

DHTMLX Pivot 需要正确定义字段数据。否则，数字列可能会被视为文本，从而影响排序和聚合。使用dataTypes对象有助于根据网格数据的第一行自动检测列类型：

复制代码

const dataTypes = {};
const firstItem = grid.data.getItem(grid.data.getId(0));
for (const c in firstItem) {
    dataTypes[c] = typeof(firstItem[c]) === "string" ? "text" : typeof(firstItem[c]) === "number" ? "number" : "date";
}

然后，使用检测到的数据类型动态生成 Pivot 字段：

复制代码

storedPivotFields = grid.config.columns.map(col => ({
    id: col.id,
    label: col.header[0].text,
    type: dataTypes[col.id]
}));

这确保了 Pivot 组件无需手动配置即可正确处理数字和基于文本的数据。

避免空数据透视表问题

没有定义行、列或值的数据透视表会显示为空白。为了避免出现不必要的空白 UI 并使最终用户能够在数据透视模式下与网格数据进行交互，您可以使用replaceInnerGrid(pivotWidget)函数在数据透视容器内插入一个临时网格：

复制代码

function replaceInnerGrid(pivot) {
    const grid = pivot.container.getElementsByClassName("wx-grid");
    if (grid.length) {
        grid[0].innerText = "";
        innerGrid = new dhx.Grid(grid[0], defaultGridConfig);
    }
}

该解决方案通过显示有意义的数据而不是空白屏幕来改善用户体验。

从 Pivot 切换时保留设置并维持网格一致性

Pivot 组件的丰富功能使最终用户能够重新排列数据并执行复杂的计算以获得有价值的见解。因此，在切换到网格模式之前保留 Pivot 设置非常重要：

复制代码

const tableApi = pivotWidget.getTable();
const pivotConfig = pivotWidget.api.getState().config;

代码通过提取 Pivot 的最终状态并将其应用于 Grid 来实现这一点。如果在 Pivot 模式下未进行任何配置更改，则恢复原始 Grid 配置：

复制代码

if (!pivotConfig.rows.length && !pivotConfig.columns.length && !pivotConfig.values.length) {
    storedGridConfig = defaultGridConfig;
    storedPivotConfig = null;

由于 Pivot 和 Grid 处理列宽的方式不同，切换回 Grid 可能会导致宽度不一致。您必须确保每列都有预定义的宽度：

复制代码

columns: columns.map(c => {
    c.id = c.id.toString();
    c.width = c.width ? c.width : 150;
    return c;
}),

如果没有这个步骤，从枢轴模式切换后，网格布局可能会中断或出现错位。

总而言之，这些措施有助于确保在 Grid 和 Pivot 之间切换时获得一致且用户友好的体验。

考虑到本博文中强调的要点，您可以像我们的示例中一样使用 DHTMLX Grid 和 Pivot 组件创建一个基本的 JavaScript 数据透视网格。使用这些产品中文档齐全的 API，您可以显著扩展其功能以满足各种项目需求。

总结

DHTMLX Grid 和 Pivot 组件可以成为任何对处理和分析大型数据集有很高要求的数据密集型应用程序的绝佳补充。与所有 DHTMLX 产品一样，这些组件具有高度兼容性，可以轻松集成到基于流行前端框架的 Web 项目中的单一枢轴网格解决方案中。下载免费的 30 天试用版Grid 和 Pivot 组件，并在您的场景中测试这些产品的功能。