数据透视表控件DHTMLX Pivot v2.1发布，新增HTML 模板、增强样式等多个功能

++DHTMLX Pivot++ 数据透视表能快速地对数据进行计数、总计、平均和执行许多其他操作。近日，DHTMLX Pivot发布了2.1版本，该版本扩展了开发人员通过新增的 CSS 样式选项、HTML 模板以及数字和日期的自定义格式修改表格外观的能力。此外，该版本还增加了冻结右侧列的功能、扩展了导出到 Excel 和 CSV 的设置，并进行了一些细微的改进。此外，我们的团队还准备了集成演示，让您更轻松地将我们的JavaScript 数据透视表与 React、Angular、Vue 和 Svelte 结合使用。

立即获取DHTMLX Pivot 2.1正式版

以下是DHTMLX Pivot 2.1 新功能的详细概述：

数字和日期字段的灵活格式

在将数据透视表集成到高度重视国际业务的 Web 应用程序中时，务必牢记不同国家/地区在数字和日期格式方面存在的差异。忽视这一点可能会导致数据误解，或给全球团队带来糟糕的用户体验。

借助 DHTMLX Pivot 中新增的语言环境相关格式支持，您可以确保日期和数字字段将根据应用当前的语言环境自动调整。您可以通过在本例中切换语言环境来测试其工作方式，并关注"利润"和"日期"列的格式变化。

可以在语言环境级别更改日期和数字格式，但如果需要，您还可以使用fields属性的格式参数将自定义格式应用于特定的日期和数字字段：

自定义数字格式

格式参数允许指定分数位数和整数位数以及数值之前（前缀）和之后（后缀）的符号：

复制代码

 fields:[
   { id: "marketing", label: "Marketing", type:"number", formats:{
        prefix: "$", minimumFractionDigits: 2, maximumFractionDigits: 2 }
   }
]

默认情况下，数值的小数部分显示限制为3位，整数部分采用组分隔。

自定义日期格式

默认日期格式（"％d.％m.％Y"）通过当前语言环境的dateFormat参数设置，但您可以通过fields属性的format参数重新定义它：

复制代码

fields:[
  {id:"date", label:"Date", type:"date", format:"%M %d, %Y" }
]

当不需要对特定字段进行格式化时，可以通过将格式参数的值更改为false来禁用它。

单元格和标题的新样式选项

样式设置或许并非直接决定数据透视表在数据分析中的效率，但它无疑会影响此类工具的易用性。DHTMLX Pivot 2.1 提供了一些样式设置新功能，让这一过程更加便捷。

tableShape属性新增的cellStyle参数，让您可以完全控制单个表格单元格的视觉外观。它返回一个字符串，作为 CSS 类名，用于向单元格添加自定义样式。

复制代码

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        totalColumn: true,
        totalRow:true,
        cellStyle: (field, value, area, method, isTotal) => {
            if (field === "status" && area === "rows" && value) {
                if (value === "Down") {
                    return "status-down";
                } else if (value === "Up") {
                    return "status-up";
                } else if (value === "Idle") {
                    return "status-idle";
                }
            }
        }        
    },
...

因此，您可以根据字段名称、单元格值、单元格所属的表部分甚至聚合操作动态地为单元格分配自定义样式。

类似地，您可以通过headerShape属性的cellStyle参数修改标题的外观：

复制代码

headerShape:{
    cellStyle:(field, value, area, method, isTotal) => {
        if(field == "streaming")
            return value ==="no"?"status-down":"status-up";
    }
}

v2.1 中新增的另一项样式改进与数字的对齐方式有关。从现在开始，单元格中的数字将默认右对齐（标题和树形模式除外）。如果需要，您可以使用wx-number CSS 类更改对齐设置：

复制代码

<style>
   .wx-number {
       justify-content: start;
   }
</style>

这些样式增强功能将使您的数据透视表更具可读性和信息性，这对于仪表板、财务报告和任何数据驱动的应用程序至关重要。

数据透视表单元格的自定义 HTML 模板

延续 v2.1 中一系列视觉增强功能，我们也很高兴地推出了一种使用模板在标题和正文单元格中应用自定义 HTML 内容的新方法。之前，您可以通过headerShape和tableShape属性中相应的 template 参数添加模板。现在，您可以使用新的pivot.template助手，超越纯文本，用多样化的内容丰富您的 JS 数据透视表。

在上面的数据透视表中，您可以看到几个在单元格中集成 HTML 模板的生动示例。为了清晰起见，以下是如何根据字段（id、user_score）添加旗帜和星形图标的方法：

复制代码

function cellTemplate(value, method, row, column) {
    const field = column.fields ? column.fields[row.$level] : column.field;
    if (field == "id")
        return idTemplate(value);
    if (field == "user_score")
        return scoreTemplate(value);
    else return value;
}

应该在表格渲染之前应用pivot.template辅助函数。为此，需要使用api.intercept()方法拦截render-table事件：

复制代码

widget.api.intercept("render-table", ({ config: tableConfig }) => {
    tableConfig.columns = tableConfig.columns.map((c) => {
        if (c.area == "rows") {
            c.cell = pivot.template(({value, method, row, column}) => cellTemplate(value, method, row, column))  
        ...
        return c;
    });
});

使用 HTML 模板，您可以根据需要定制数据透视表中的数据呈现，从而提高应用程序的可用性和视觉吸引力。

冻结右侧列

在 v2.1 中，我们的开发团队还添加了冻结数据透视表最右侧列（总计或汇总字段）的选项。虽然左侧列的冻结功能自 v2.0 起就已可用，但新增的"右侧"选项扩展了此功能，从而实现更高效的数据分析和决策。此功能让您在水平滚动浏览大型数据集时，始终能够在表格两侧清晰地查看关键数据。

查看示例 >您可以通过编程方式在tableShape属性的split

参数中启用新选项。只需将right属性的值设置为true即可，如以下代码示例所示：

复制代码

const widget = new pivot.Pivot("#pivot", {
   fields,
   data: dataset,
     tableShape:{
       split: {right: true},
       totalColumn: true,
     },
...//other settings
});

要冻结右侧任意数量的列，您需要拦截render-table事件并在tableConfig对象的split设置中定义right属性：

复制代码

widget.api.on("render-table", ({ config: tableConfig }) => {
   const { config } = widget.api.getState();
   tableConfig.split = {
       right: config.values.length,
   }
})

总体而言，冻结数据透视表列的能力可确保更好地控制数据呈现并简化大型数据集的分析。

扩展导出设置至 Excel 和 CSV 格式

数据导出是 Pivot 组件的另一项功能，在 v2.1 中新增了配置选项。现在，您可以导出更有意义的 Excel (XLSX) 和 CSV 格式的数据，以满足不同用户的特定需求。无论您是想添加文件名、导出不带页眉或页脚的数据、指定导出数据透视表元素的样式，还是排除任何样式，现在都可以使用导出事件的选项对象中提供的新导出参数来实现。在应用新的导出参数之前，需要使用getTable()方法访问 Table 小部件 API 来触发导出操作。

以下是扩展导出设置至 Excel 格式的示例：

复制代码

...
table.exec("export", {
    options: {
        format: "xlsx",
        fileName: "results", // a name of file, "data" by default
        header: false, // export header or not, true by default
        footer: false, // export footer or not, true by default
    }
});
...

此外，我们还必须提及一些与使用指定格式和模板将数据导出到 Excel 相关的增强功能：

日期和数字字段以默认格式或指定的自定义格式导出为原始值。
如果字段指定了模板，导出时将使用该模板的渲染值，而不是原始数据。即使指定字段定义了格式，模板的优先级也高于格式。

该文档包含有关新 Pivot 导出设置到 Excel 和 CSV 的完整信息。

其他改进

除了此版本的主要功能外，我们还必须提及一些旨在提升 DHTMLX Pivot 用户体验的小新功能。首先，它增强了键盘导航功能，并添加了可视化指示器。

另一个有用的补充是能够通过外部输入过滤数据，如下例所示。

以上就是 2.1 版本新功能的概述。