彩票走势图

DHTMLX Suite 是一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件，这些组件可以轻松组合到单个应用程序界面中。

DHTMLX Spreadsheet正版试用下载

这个小更新主要是为了改进两个流行的 Suite 小部件——Grid 和 TreeGrid。它包括自动高度、将数据表导出为 PDF 和 PNG 文件以及将单独的编辑器选项列表添加到列的任何单元格等新功能。我们添加了在 TreeGrid 中选择任意数量的行和单元格以及通过拖放移动行的功能。Tree 和 TreeGrid 小部件也获得了折叠模式。除此之外，我们还更新了图表中的导出 API。。

Grid/TreeGrid (PRO) 中的自动高度模式

新的 Suite 版本能够在 Grid 和 TreeGrid 小部件中设置自动高度。实际上，在调整使用 DHTMLX 构建的数据表的大小时，此功能非常有用。例如，现在当最终用户决定添加或删除行时，Grid/TreeGrid 将自动调整它们的高度以适合所有表格行。换句话说，表格会在添加行后扩展，而删除行会使表格缩小。这将有助于解决常见问题，例如最后一行和网格底部之间的空白区域。

要为 DHTMLX Grid 启用自动高度模式，您应该在 Grid 配置对象中将属性的值设置为“auto”。

const grid = new dhx.Grid("grid", {
columns: [
// columns config
],
data: dataset,
adjust: true,
height: "auto",
});

请注意，此功能仅在 DHTMLX Grid 的专业版中可用。

属性现在提供了相同的“自动”选项。因此，最终用户在展开和折叠树数据时应该不会有任何问题。

在这两个小部件中，您还可以使用min-height和max-height CSS 属性为容器指定最小和最大高度限制：

<style>
.grid {
min-height: 400px;
max-height: 600px;
}
</style>

Grid/TreeGrid 的新导出选项

在处理表格形式的大型数据集时，有机会离线使用这些信息是件好事。这就是为什么我们继续扩展套件小部件的流行导出选项列表的原因。从 v8.1 开始，Grid 和 TreeGrid 小部件允许将数据导出为 PDF 和 PNG 格式。这些新功能将补充已经可用的 CSV 和 Excel 导出功能。

在实现从 Grid 导出到 PDF 和 PNG 文件时，需要使用和方法。它们通过以下方式使用grid.export对象调用：

• 网格.export.pdf();
• 网格.export.png();

导出设置非常灵活，如果需要，您可以进行各种调整：

grid.export.pdf({
pdf:{format: false, scale:0.8},
theme: "dark",
});

TreeGrid 小部件还接收了pdf()和png()方法。

除此之外，Grid 和 TreeGrid 的 API 现在还包含 exportStyles属性，可以将数据与所需的 CSS 样式一起导出。为此，您必须指定具有所需样式的完整路径的字符串值，如下所示：

const grid = new dhx.Grid("grid_container", {
columns: [
// columns config
],
exportStyles: [
"//mySite.com/exportStyle.css",
"//mySite.com/secondExportStyle.css"
],
data: dataset
});

默认情况下，此功能处于禁用状态，因为它有助于减小导出数据的大小。

最终用户将能够通过相应的 UI 按钮导出数据。您可以使用此示例测试 PDF 和 PNG 导出选项。

可通过我们的在线导出服务免费导出为 PDF/PNG。如果在没有有效订阅的情况下使用，水印将出现在导出的表格上。另一种选择是获取本地导出模块，可以将其安装在您的服务器上以避免向我们的服务发送数据。导出为 PDF/PNG 的模块在商业、企业和终极许可下的套件包中提供，或者可以单独购买。

Grid/TreeGrid 中列单元格的单独编辑器选项集

新的 DHTMLX Suite 8.1 还触及了编辑等数据管理的关键方面。从现在开始，您可以在列的单元格中添加自己的一组不同的编辑器选项。此功能可用于选择、多选和组合框编辑器类型。

为了提供此功能，我们的开发团队扩展了Grid 和 TreeGrid 小部件中的属性。现在您可以将列的此属性定义为采用以下参数的回调函数：

col – 列的当前配置，调用函数的位置
row – 行中的所有单元格，调用函数的位置

该函数将返回字符串值数组或对象数组。

应该提到的是，如果在editorConfig对象中启用了newOptions属性，所有新的编辑器选项将独立于初始化期间指定的其他选项显示。

因此，您可以为最终用户提供从单元格中的各种值集中进行选择的可能性，从而使编辑过程更加灵活和方便。

选择和移动多个 TreeGrid 元素

在 Suite 库的最近重大更新之后，一次拖放多条记录的功能已可用于 Grid 组件，我们的客户非常喜欢它。对该功能的高需求使我们确信将其添加到 TreeGrid 小部件中。就在这里。

新的属性允许最终用户使用“Ctrl + 单击”热键组合一次选择树形表中任意数量的行和单元格。您只需将此属性添加到 TreeGrid 的配置对象并将其值设置为true。

const treeGrid = new dhx. TreeGrid ( "treegrid" , {
columns : [
// columns config
] ,
data : dataset ,
adjust : true ,
multiselection : true ,
dragExpand : true ,
selection : "row" , // "cell" | "row" | "complex "
} ) ;

多选属性还有助于使最终用户能够使用拖放操作移动带有记录的多行。当您为行配置拖放时，应该激活该属性：

const treeGrid =  new dhx. TreeGrid ( "treegrid" ,  {
...

//在树状网格内拖放行
multiselection :  true ,
dragItem :  "both"  // or dragItem: "row"
//在树状网格之间拖放行
multiselection : true ,
dragMode : "both" // or dragMode: "source"
} ) ;

此外，我们添加了dragExpand属性，允许最终用户查看折叠行的所有子元素，因为当用户在拖放过程中将鼠标悬停在它们上方时，它们会展开。如果您不需要此功能，只需将该属性的值设置为false即可。

Tree/TreeGrid 中的折叠模式

还有一个影响 Suite 的 TreeGrid 和 Tree 的更值得注意的变化。在 v8.1 中，我们为您提供了一种方法来初始化这两个小部件，同时保持行的折叠状态。以前，您可以使用collapseAll()方法执行此操作，但它会导致性能下降。

由于新添加的 collapsed属性，在初始化 Tree 和 TreeGrid 时保持行的折叠状态成为可能。有必要将此属性添加到所需小部件的配置对象并将其值设置为true。这就是将collapsed属性嵌入到 TreeGrid 配置中的方式：

const treeGrid = new dhx.TreeGrid("treegrid", {
columns: [
...
],
collapsed: true,
data: dataset
});

类似的属性负责 Tree 小部件中的折叠模式。中如何实现此功能。

其他改进

最后，我们想提一下图表小部件中对和方法的一系列小补充，旨在改善您使用相应导出选项的体验。我们将 theme 和exportStyles选项添加到两种方法中的导出对象。pdf对象现在还包括以下新选项：pageRanges、displayHeaderFooter、footerTemplate和headerTemplate。
就像在 Grid 和 TreeGrid 小部件中一样，现在您可以使用属性来导出具有 CSS 样式的图表。

甘特图控件交流群：764148812    欢迎进群交流讨论