JavaScript UI库dhtmlxSuite v7.1发布，DHTMLX Grid和TreeGrid的新工具提示模板

dhtmlxSuite是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库，用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立一个企业级的跨浏览器Web应用和移动应用程序，它能提供优秀的性能和更丰富的用户体验。

dhtmlxSuite最新版

数字格式

该版本的主题演讲是能够以所需的数字格式在DHTMLX Grid和TreeGrid列的单元格中指定和显示值。从现在开始，您可以定义在小数点后显示多少位数，以及如何设置千位和十进制分隔符。您可以将值设置为百分比，并轻松地将必要的数字格式与货币和任何其他符 组合在一起。

下面的示例演示了具有不同格式设置的六个Grid列的配置：

• 第二列中具有数千个分隔符的人口数
• 百分比值在第三栏中四舍五入到小数点后两位
• 第四栏中带有千位分隔符的美元数量
• 以撇 作为小数点分隔符的生育率在第五栏中四舍五入到小数点后两位
• 日期根据第六列中的美国日期格式

要像上面的示例一样应用所需的数字格式，我们已经指定了每一列的格式配置选项。百分比值是通过以下类型设置的：“百分比”配置选项。借助于简单的模板，分别在第四和第五列中指定值后跟美元符 和yrs缩写：

    columns: [        { width: 150, id: "country", header: [{ text: "Country" }], footer: [{ text: "Summary" }] },        { width: 150, id: "population", header: [{ text: "Population" }], footer: [{ content: "sum" }], type: "number", format: "# #" },        { width: 120, id: "yearlyChange", header: [{ text: "Yearly Change" }], footer: [{ content: "avg" }], type: "percent", format: "#,00" },        { width: 150, id: "netChange", header: [{ text: "Money" }], footer: [{ content: "sum" }], type: "number", format: "# #", template: i => `$ ${i}` },        { width: 150, id: "fert", header: [{ text: "Fert. Rate" }], footer: [{ content: "min" }], type: "number", format: "# ' 00", template: i => `${i} yrs` },        { width: 150, id: "date", header: [{ text: "Date" }], footer: [{ content: "count" }], type: "date", format: "%M %d %Y" }    ],

相同的配置选项可在DHTMLX TreeGrid中启用数字格式设置，如您在此代码片段中所见。您可以在文档中了解有关在Grid和TreeGrid中指定格式的更多信息。

列中的多行文字

const grid = new dhx.Grid("grid", {    columns: [{// column’s configeditorType: “textarea”}// more columns],    data: dataset,    autoHeight: true,    editable: true,});

您可以在此代码段中查看DHTMLX TreeGrid中的多行内容示例。

工具提示模板

V7.1扩展了DHTMLX小部件的自定义机会。从现在开始，您可以为Grid和TreeGrid单元创建自定义工具提示，其中包含任何类型的HTML内容。例如，工具提示可以显示几行内容，以提供有关表中数据的附加信息，包括图像：

如果数据表中有很多行和列，则可以在工具提示中包括该行所有单元格的值：

通过DHTMLX Grid和TreeGrid中的tooltipTemplate函数可以创建自定义工具提示。

其他更新

分行高度

虽然您可以在DHTMLX Grid或TreeGrid的配置中一行代码中一次定义所有行的高度，但是您可能需要为一行或几行指定不同的高度值。V7.1引入了新的height属性，您可以为数据集中的特定行设置该属性，如下例所示：

const dataset = [        {            "name": "Bestsellers",            "id": "b.1",            height: 150,        },...        {            "name": "A Time to Kill",            "price": "12.25",            "cover": "Hardcover",            "ships": "12 hours",            "inStock": "80",            "parent": "c.1",            height: 60,        },...      ];

新的height属性优先于autoHeight：true配置选项。在DHTMLX Grid和TreeGrid文档中了解更多信息。

Date() Object Support

从现在开始，在DHTMLX Grid和TreeGrid中使用日期配置列更加容易，因为它们支持Date（）对象：

const dataset = [        {            "country": "China",            "date": new Date()        },        {            "country": "India",            "date": new Date(2010, 02, 10)        },];

管理DHTMLX窗口的全屏模式

我们在DHTMLX Window的API中添加了两种新方法来控制全屏模式。所述isFullScreen（）方法检查窗口是全屏与否。所述unsetFullScreen（）方法退出全屏。

多个系列的图表工具提示

V7.1对DHTMLX图表中的工具提示进行了改进。现在，用户可以在x轴上看到与某个点相关的所有序列，从而更快地处理数据。

DHTMLX Grid，Tree和TreeGrid中的新事件

为了确保交互性，我们向DHTMLX Grid，Tree和TreeGrid添加了更多事件。该beforeRowResize和afterRowResize帮助听行高度的变化（在仅专业版）。用户对列中的数据进行排序时，将触发beforeSort和afterSort。在DHTMLX树中，新的beforeCheck和afterCheck事件允许窗口小部件对复选框项目的状态变化做出反应。

DHTMLX TreeGrid中的根父级

新的rootParent配置选项允许定义TreeGrid根父级的ID。
除了上述新功能和更新之外，v7.1还提供了一系列修复程序。您可以在我们文档的“新功能”部分中了解整个列表。
享受新引入的7.1版本–下载DHTMLX Suite的30天免费评估版。
我们期待您的反馈。如果有任何问题，我们的技术支持团队将随时乐意为您提供帮助。
我们邀请当前的客户在其客户区域中获取新版本。
敬请关注！

想要购买dhtmlxSuite正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：