DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件这些组件可以轻松组合到单个应用程序界面中。DHTMLX Suite v8.3已于近日正式发布啦这个更新附带了一组新特性和改进旨在促进您使用JavaScript UI小部件库的体验。例如在Colorpicker小部件中添加了设置颜色透明度级别的功能。在v8.3中流行的Grid/TreeGrid功能如自动高度模式、单元格中的HTML内容和事件处理程序可以专门应用于页眉和页脚。Colorpicker颜色选择器 - 颜色透明度选项DHTMLX Colorpicker是一个方便的工具可以在各种UI元素(如表单或弹出窗口)中实现颜色选择功能。在v8.3中我们为这个小部件补充了一个丰富的调色板可以指定所选颜色的透明度。您不需要在代码中添加任何东西来允许最终用户使用颜色透明度因为这个特性在默认情况下是通过新的透明度属性启用的此属性负责在网页上显示透明度比例。要通过UI设置所需的颜色透明度级别最终用户只需拖动透明度刻度上的滑块旋钮如下面的示例所示。如果需要可以通过将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 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 classdhx_checkbox dhx_cell-editor__checkbox input typecheckbox classdhx_checkbox__input dhx_checkbox--check-all span classdhx_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交付动态和交互式数据表的机会。页眉/页脚单元格中的HTML内容除了自动高度模式和事件处理程序之外8.3版本还为列的页眉/页脚添加了一个Grid/TreeGrid功能。现在您可以使用htmlEnable属性用任何HTML内容来补充这些表元素。例如您可以应用htmlEnable属性来改变标题单元格的样式如下所示const grid new dhx.Grid(grid, { columns: [ { width: 200, id: country, header: [ { text: span stylefont-size:16px; color: steelblueCountry/span, htmlEnable: true, } ]}, { width: 150, id: population, htmlEnable: true, header: [ { text: span classheader-titlePopulation/span } ...// other columns configs ], data: dataset, htmlEnable: false, });当应用于列的页眉(或页脚)时htmlEnable属性将重新定义已经为父列或整个表指定的相同配置的值。