DHTMLX Suite v8.3发布！深化JavaScript UI小部件库使用体验

本文主要是介绍DHTMLX Suite v8.3发布！深化JavaScript UI小部件库使用体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

DHTMLX Suite v8.3已于近日正式发布啦！这个更新附带了一组新特性和改进，旨在促进您使用JavaScript UI小部件库的体验。例如，在Colorpicker小部件中添加了设置颜色透明度级别的功能。在v8.3中，流行的Grid/TreeGrid功能，如自动高度模式、单元格中的HTML内容和事件处理程序，可以专门应用于页眉和页脚。

DHTMLX Suite v8.3正式版下载

Colorpicker（颜色选择器） - 颜色透明度选项

DHTMLX Colorpicker是一个方便的工具，可以在各种UI元素(如表单或弹出窗口)中实现颜色选择功能。在v8.3中，我们为这个小部件补充了一个丰富的调色板，可以指定所选颜色的透明度。

您不需要在代码中添加任何东西来允许最终用户使用颜色透明度，因为这个特性在默认情况下是通过新的透明度属性启用的，此属性负责在网页上显示透明度比例。

要通过UI设置所需的颜色透明度级别，最终用户只需拖动透明度刻度上的滑块旋钮，如下面的示例所示。

DHTMLX Suite v8.3产品图集

如果需要，可以通过将transparency属性的值设置为false来禁用颜色透明度特性。

const colorpicker = new dhx.Colorpicker("colorpicker", {
transparency: false
});

Grid & TreeGrid - 列的页眉和页脚的新功能

自动高度模式(PRO)

在8.1版本中，我们为使用Grid和TreeGrid小部件构建的表中的行引入了自动高度模式，新的Suite版本将此功能扩展到表列中的页眉和页脚。因此，Grid/TreeGrid将根据内容动态调整页眉/页脚的高度，页眉和页脚可以包含各种长度的文本，并且对最终用户仍然完全可见。

通过编程方式，在Grid/TreeGrid配置对象中添加新的headerAutoHeight和footerAutoHeight参数来激活页眉/页脚的自动高度模式。它们允许切换页眉或页脚的自动高度模式，独立于常见的autoheight属性。

下面是如何在Grid小部件中完成的：

const grid = new dhx.Grid("grid", {
columns: [
...
],
...
autoHeight: false, // enables autoHeight in data (content)
headerAutoHeight: true, // enables autoHeight in header
footerAutoHeight: true, // enables autoHeight in footer
});

DHTMLX Suite v8.3产品图集

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

请记住，如果您的表应该具有特定固定高度的页眉和页脚，也可以通过已经存在的headerRowHeight和footerRowHeight属性来指定它们。

事件处理程序

DHTMLX Suite 8.3为您提供了一种新的方便方法，可以在Grid/TreeGrid中向列的页眉和页脚添加事件处理程序。现在，您可以依靠eventHandlers属性来更快地完成此任务，而不是自己将事件处理程序附加到页眉/页脚。如果以前这个属性只允许向数据集中定义的HTML元素或列单元格中的自定义模板添加事件处理程序，那么现在它也可以用于页眉/页脚单元格。

例如，您可以在标题中将onclick事件添加到主复选框中。当复选框被标记为已选中/未选中并更新列中的所有从属复选框时，该事件应该触发：

const grid = new dhx.Grid("grid", {
columns: [
{
width: 60,
id: "paid",
header: [
{
text: `
<label class="dhx_checkbox dhx_cell-editor__checkbox ">
<input type="checkbox" class="dhx_checkbox__input dhx_checkbox--check-all">
<span class="dhx_checkbox__visual-input "></span>
</label>
`,
...// more options
],
...// more options
eventHandlers: {
onclick: {
"dhx_checkbox--check-all": function(event, data) {
grid.data.forEach(row => {
grid.data.update(row.id, {
[data.col.id]: event.target.checked,
});
});
}
},
},
});

DHTMLX Suite v8.3产品图集

这种新特性扩展了使用DHTMLX交付动态和交互式数据表的机会。

页眉/页脚单元格中的HTML内容

除了自动高度模式和事件处理程序之外，8.3版本还为列的页眉/页脚添加了一个Grid/TreeGrid功能。现在，您可以使用htmlEnable属性用任何HTML内容来补充这些表元素。

例如，您可以应用htmlEnable属性来改变标题单元格的样式，如下所示：

const grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [
{
text: "<span style='font-size:16px; color: steelblue'>Country</span>",
htmlEnable: true,
}
]},
{ width: 150, id: "population", htmlEnable: true, header: [
{ text: "<span class='header-title'>Population</span>" }
...// other columns' configs
],
data: dataset,
htmlEnable: false,
});

DHTMLX Suite v8.3产品图集