彩票走势图

DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件，这些组件可以轻松组合到单个应用程序界面中。DHTMLX JS UI 组件可用于任何服务器端技术：PHP、Java、ASP.NET、Ruby、Grails、ColdFusion、Python 等。此外，您可以轻松地将它们集成到基于Angular、React和 Vue.js 的 Web 应用中。

DHTMLX Suite 9.0 现已发布，该版本将数据管理功能提升到了新的高度！此主要版本为 JavaScript UI 库引入了创新增强功能，行数据分组是此版本的核心。欢迎下载体验！

DHTMLX Suite v9.0正式版下载

• 行数据分组：使用 API 或 UI 轻松分组和自定义数据呈现。
• 自定义统计功能：显示特定列的自定义计算摘要。
• 输入掩码：使用适用于网格和表单小部件中各种数据格式的用户友好型输入掩码改进数据输入。
• 集成 TreeGrid：使用现在完全集成到网格小部件中的 TreeGrid 简化您的设置。

TreeGrid 成为 Grid Widget 的一部分 (PRO)

DHTMLX TreeGrid 是 Grid 小部件的扩展，因此它们在使用和 API 方面一直非常相似。这就是为什么将 TreeGrid 合并到 Grid 中是一个合乎逻辑的步骤，它扩大了 Grid 在具有可扩展/可折叠行的分层数据表示中的适用性。还有其他积极的结果，例如统一的功能、更快的开发和简化的维护。从技术角度来看，这一措施是此版本的最大功能（即基于树结构的数据分组）的关键条件。

现在，Grid API 允许配置JS 数据表以呈现平面和层次结构。在 Grid 配置中使用type: “tree”可以启用具有所有 TreeGrid 功能的树模式：

const grid = new dhx.Grid("grid_container", {
    type: "tree",
    columns: [
       // columns config
    ],
    width: 400,
    data: dataset
});

新模式支持键盘导航，以确保使用按键和快捷键方便地管理树状数据结构。

灵活行数据分组 (PRO)

从 v9.0 开始，DHTMLX Grid 支持行数据分组。这是此主要版本的一个杀手级功能，旨在通过根据选定的分组标准分层组织数据来简化大型数据集的分析。因此，它成为一个强大的工具，可以迅速从聚合数据中发现有价值的模式和趋势，从而促进更有效的决策。

最棒的是，此功能在实现时考虑到了高度灵活性，这意味着您可以根据任何项目需求配置分组。为此，我们丰富了 Grid API，增加了新属性，允许您指定分组详细信息。

预定义分组配置通过新的group属性实现。此属性用于指定表中分组的行为、可见性和外观。它还允许管理组面板、列的显示、分组顺序以及与数据聚合相关的设置。

const grid = new dhx.Grid("grid", {
    columns,
    group: {
        order: ["shelter_location"]
    },
    //more configuration options
});

组配置选项包含许多参数，可帮助您根据需要修改分组设置。例如，您可以将分组与数据聚合结合起来。为此，您需要fields参数，该参数设置按某些列进行数据分组的扩展配置，并指定聚合和显示总值的规则。分组的顺序在相应的order参数中排列。

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "country", header: [{ text: "Country" }] },
        { id: "population", header: [{ text: "Population" }] },
        { id: "density", header: [{ text: "Density (P/Km²)" }] }
    ],
    group: {
        panel: true,
        fields: {
            population: {
                summary: "bottom",
                map: {
                    population: ["population", "sum"],
                    customSummary: function(rows) {
                        return rows.length;
                    }
                }
            }
        },
        order: ["population"]
    },
    data: dataset
});

至于最终用户的分组能力，那是非常巨大的。想让最终用户完全自由地根据网格表的一列或多列的值对数据进行分组吗？只需在网格配置中启用groupable属性即可。您还可以在此配置中添加closable属性，允许用户从分组面板中删除任何项目。

在 UI 中，只需将所需列的标题拖到分组面板中，Grid 就会根据这些列中的值自动创建组。最终用户还可以通过重新排序面板中的项目或删除不再需要的项目来编辑分组的嵌套级别。分组列的值是可排序的。

如果分组仅与特定的网格列相关，则应将groupable属性（以及closable，如果需要）添加到所需列的配置中。

在网格配置中启用分组功能后，该功能也会在DataCollection API中可用。在 v9.0 中，它包含一系列用于分组项目的新方法和事件。例如，您可以对数据进行分组并将其分为不同的类别：

因此，这一重要功能将帮助您弥合原始数据和可操作见解之间的差距。

使用自定义函数计算的值的摘要

此主要版本中为 DHTMLX Grid 提供的另一个重大创新在于自定义计算领域。我们在这里谈论的是重新定义默认统计函数并呈现特定列或整个 JS 网格表的自定义计算摘要的能力。这在预定义函数（sum、avg 等）不够用的场景中非常有用。例如，财务报告或科学研究可能有特定的数据分析需求，可以通过自定义计算来解决，而更新的 Grid API 使您能够做到这一点。

在 JavaScript 数据表中生成数据摘要的过程包括以下步骤：

1) 定义一个函数，用于在创建摘要列表时进行计算。

为此，您需要dhx.methods助手，它用于定义默认统计函数或创建自定义函数，如下所示：

dhx.methods.doubleSum = (rows, field) => {
    return rows.reduce((sum, row) => sum + row[field] * 2, 0); };

2）形成所需级别的汇总清单。

您可以为特定列或整个数据表创建摘要：

• 对于列，您应该使用summary属性在 Grid 列配置中初始化摘要（作为对象或字符串）。
• 对于覆盖整个表格的摘要，您需要网格的摘要配置选项。

为了在列和网格摘要中呈现自定义统计信息，需要将列和网格跨度配置对象的text和tooltipTemplate属性设置为回调函数。

3) 获取具有计算值的摘要对象。Grid

API 现在包含getSummary()方法，可用于获取整个网格或特定列的摘要数据。如果调用该方法而不带任何参数，您将获得整个网格的摘要。指定id参数后，您将获得列和网格的摘要。

此类自定义增强了 DHTMLX Grid 在需要复杂计算的应用程序中可用性。

在此示例中，您可以看到如何将这些新功能应用于实际场景中，并在编辑后进行动态更新。

使用网格和表单中的输入掩码提高准确性

处理复杂表格时，最终用户可能需要以特定格式输入数据（日期、电话、数字、信用卡详细信息等），并且可能会出现错误。Web 开发人员可以实施广泛的验证逻辑来减少此类错误的可能性，但 Suite 9.0 为此类问题提供了更简单的解决方案。这些是可以使用 Grid 列对象中的以下属性为各种数据格式指定的输入掩码：

• 数字掩码

它仅用于指定数值的输入掩码。此属性包括此页面提供的一系列参数，可帮助您形成所需的数字格式。例如，以下示例中的 Salary 列的输入掩码配置方式如下：

...
{
   id: "salary",
   header: [{ text: "Salary" }],
   numberMask: { prefix: "£", maxDecLength: 0 }
}
...

• 图案蒙版

使用此属性，您可以为列指定输入掩码，其中单元格可以包含数字和字符串值。常见的情况是信用卡掩码：

...
{
   id: "card_number",
   header: [{ text: "Card number" }],
   patternMask: "0000 0000 0000 0000"
}
...

这些输入掩码新功能现在可用于另一个以数据为中心的 Suite 小部件 Form。此小部件的 API 还接收了numberMask和patternMask属性，用于在 Form 小部件的输入和文本区域控件中指定所需的掩码模板。输入控件 API 具有用于管理输入掩码的getText()方法。尝试使用 JS 表单的数字掩码和模式掩码。

如果您想探索v9.0 中的所有精彩功能，欢迎下载DHTMLX Suite v9.0体验！

慧都21周年庆年终大促现已开启，DHTMXL全线产品参与优惠活动，如有任何问题和需求，请联系~