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

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

DHTMLX Suite 9.1 现已发布，您可以享受新功能以实现更高级的数据分析。

DHTMLX Suite v9.1最新版下载

更新后的JavaScript 数据网格提供了行扩展器功能，允许将子网格、其他 Suite 小部件或自定义 HTML 嵌入到表行中。现在，可以按多列对网格数据进行排序并获得更有价值的见解。最重要的是，我们的开发人员为您提供了一个新演示，演示了以数据为中心的Suite UI 小部件的多用户后端，以及一系列新示例，重点是进一步揭示实际案例场景中的网格优势。

用于增强数据管理的行扩展器 (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() 方法获取特定子行的当前配置和内容。

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