JS UI库DHTMLX Suite 发布v9.1：具有行扩展器、多重排序、多用户后端等功能的网格-控件新闻-慧都网

JS UI库DHTMLX Suite 发布v9.1：具有行扩展器、多重排序、多用户后端等功能的网格

翻译|产品更新|编辑：吉炜炜|2025-02-26 11:04:46.627|阅读 34 次

概述：在 DHTMLX Suite 9.1 版本中，您可以享受新功能以实现更高级的数据分析。

用于增强数据管理的行扩展器 (PRO)

从 v9.1 开始，DHTMLX Grid 提供了新的行扩展器功能，可以更有效地处理分层数据或相关数据。借助这一新功能，最终用户可以展开（和折叠）行以通过子行显示额外信息，而无需离开或加载其他页面。

更新后的 Grid API 包含大量选项，可让您充分利用这一出色功能。要指定主网格表每行的嵌入内容，您需要使用subRow属性。但是，请注意，此属性在 TreeGrid 模式下不起作用。

下面是向 JavaScript 数据表添加带有额外网格（即子网格）的子行的示例：

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "zone_name", header: [{ text: "Zone name" }] },
        { id: "temperature", header: [{ text: "Temperature" }] },
    ],
    data: dataset,
    subRow: ({ data }) => {
        return new dhx.Grid(null, {
            columns: [
                { id: "animal_type", header: [{ text: "Animal type" }] },
                { id: "name", header: [{ text: "Name" }] },
            ],
            data,
            autoWidth: true,
        });
    },
});

为了使您的数据表更具信息量，您可以嵌入更复杂的网格结构、使用 Suite 小部件的有用的可视化效果或任何所需的 HTML 元素，如以下示例所示：

多级嵌套子网格

具有多级嵌套子网格的子行

表格

带有表单的子行

图表

带图表的子行

自定义 HTML

具有自定义 HTML 的子行

子网格的行按条件扩展

按条件扩展网格行

仅在特定行中的子网格

某些行中的子网格

最后两个示例生动地展示了动态配置子行的可能性。在第一个示例中，子行根据某些条件（例如超过温度限制）动态配置并触发相应行的突出显示。第二个示例显示添加到某些行的子网格；或者更具体地说，不会为没有数据的行创建子行。

要使动态配置正常工作，您需要使用添加到 Grid API 的subRowConfig属性来指定子行的各种配置参数。可以通过两种方式指定：

作为将必要参数应用于所有行的对象
作为回调函数为每一行添加单独的设置

使用此配置选项，您可以设置高度、填充、宽度、CSS 类，甚至状态持久性（称为保留）等参数。后一个参数需要一些解释。它用于在展开/折叠操作、数据更新和滚动（超出可见范围）后保持子行的状态不变。

const grid = new dhx.Grid("grid", {
    subRowConfig: {
        height: 200,
        expanded: false,
        preserve: false,
        toggleIcon: true,
        padding: 12,
        fullWidth: true,
        css: "",
    },
…
});

对于需要交互性和动态内容的场景，preserve 参数非常有用，但对于静态信息和大型数据集，preserve 参数会过大，因为会增加内存消耗。启用了preserve 参数并且所需的子行可见时，可以通过 getSubRow() 方法获取特定子行的当前配置和内容。

新的行扩展器是一个强大的功能，可以创建网格层次结构和子视图来显示复杂的数据父子关系，同时保持干净、简化的用户界面。

多重排序以实现有效的数据分析 (PRO)

在新版本中，Grid 小部件成为更强大的数据分析工具，并增加了同时按多列对数据进行排序的功能。此功能在数据密集型应用中特别有用，现在可以从不同角度分析和比较大量数据。

在 UI 中，最终用户可以通过按住 Ctrl 键单击标题来轻松定义所需网格列的排序顺序和方向。使用多排序时必须按住此键，否则，单击网格表的任何列标题都会将排序范围缩小到此特定列。
JS 网格表中的多重排序

您甚至可以更进一步将多重排序功能应用于数据组：
对分组列进行多重排序在底层，多重排序默认通过multiSort属性启用。如果不需要此功能，只需将此布尔属性的值从 true 更改为 false。当前排序参数可通过getSortingStates()方法获取。此方法在DataCollection / TreeCollection中可用。