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

发布时间:2023年12月18日

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产品图集

当应用于列的页眉(或页脚)时,htmlEnable属性将重新定义已经为父列或整个表指定的相同配置的值。

文章来源:https://blog.csdn.net/AABBbaby/article/details/134987789
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。