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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/220048.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

产品入门第五讲:Axure交互和情境

目录 一.Axure交互和情境的介绍 1.交互介绍 概念 常见的Axure交互设计技巧 2.情境介绍 概念 常见的Axure情境设计技巧&#xff1a; 二.实例展示 1.ERP登录页到主页的跳转 2.ERP的菜单跳转到各个页面 &#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个…

2024最新FL Studio21.2MAC电脑版中文版下载安装步骤教程

FL Studio 简称FL&#xff0c;全称Fruity Loops Studio&#xff0c;因此国人习惯叫它"水果"。目前最新版本是FL Studio21.1.1.3750版本&#xff0c;它让你的计算机就像是全功能的录音室&#xff0c;大混音盘&#xff0c;非常先进的制作工具&#xff0c;让你的音乐突破…

基于网络爬虫技术的网络新闻分析

目录 前言 一、网络爬虫技术 二、代理IP 三、网络新闻分析 总结&#xff1a; 前言 随着互联网的发展和普及&#xff0c;网络新闻成为人们获取信息的重要途径。然而&#xff0c;由于网络新闻的数量庞大&#xff0c;分析和处理这些新闻变得愈发困难。本文将介绍如何使用网络…

TestSSLServer4.exe工具使用方法简单介绍(查SSL的加密版本SSL3或是TLS1.2)

一、工具使用方法介绍 工具使用方法参照&#xff1a;http://www.bolet.org/TestSSLServer/ 全篇英文看不懂&#xff0c;翻译了下&#xff0c;能用到的简单介绍如下&#xff1a; 将下载的TestSSLServer4.exe工具放到桌面上&#xff0c;CMD命令行进入到桌面目录&#xff0c;执…

如何免费搭建私人电影网站(一)

前言&#xff1a;在线看电影经常会出现烦人的广告&#xff0c;为了不浪费时间看广告&#xff0c;有必要做自己的专属网站。 准备工作&#xff1a; 1、申请免费域名&#xff08;也可以花钱注册域名相对稳定&#xff09;链接: 申请免费域名方法 2、申请免费主机&#xff08;也可以…

社交网络分析3:社交网络隐私攻击、保护的基本概念和方法 + 去匿名化技术 + 推理攻击技术 + k-匿名 + 基于聚类的隐私保护算法

社交网络分析3&#xff1a;社交网络隐私攻击、保护的基本概念和方法 去匿名化技术 推理攻击技术 k-匿名 基于聚类的隐私保护算法 写在最前面社交网络隐私泄露用户数据暴露的途径复杂行为的隐私风险技术发展带来的隐私挑战经济利益与数据售卖防范措施 社交网络 用户数据隐私…

python排序算法,冒泡排序和快排

对于排序算法中比较知名的两个算法&#xff0c;分别就是冒泡排序和快速排序&#xff0c;在日常学习和使用中都会听到这两种排序算法的名称&#xff0c;这里主要介绍如何使用python来实现这两种排序算法。 冒泡排序的实现&#xff1a;一是从集合第一个元素开始&#xff0c;每两…

饥荒Mod 开发(十四):制作屏幕弹窗

饥荒Mod 开发(十三)&#xff1a;木牌传送 在上一个文章里面制作了一个传送选择页面&#xff0c;是一个全屏的窗口&#xff0c;那饥荒中如何制作一个全屏的窗口&#xff0c;下面介绍一下如何从零开始制作一个全屏窗口 制作屏幕窗口 饥荒中的全屏窗口都有一个基类 “Screen”,我…

20231218给Firefly的AIO-3399J【RK3399】开发板刷Android12挖掘机方案

20231218给Firefly的AIO-3399J【RK3399】开发板刷Android12挖掘机方案 2023/12/18 21:07 一、整体编译Rockchip的的Android12的挖掘机方案&#xff01; 由于RK3399的Android12系统默认是IND工业方案&#xff0c;需要修改一下【为挖掘机方案】。 Z:\3TB\81rk_android12_220722\…

18.XML

XML简介 • XML–可扩展标记语言 eXtensible Markup Language • 由W3C组织发布&#xff0c;目前推荐遵守的是W3C组织于2000年发布的XML1.0规范 • XML的使命&#xff0c;就是以一个统一的格式&#xff0c;组织有关系的数据&#xff0c;为不同平台下的应用程序服务 • XML用来…

The Grid – Responsive WordPress Grid响应式网格插件

点击阅读The Grid – Responsive WordPress Grid响应式网格插件原文 The Grid – Responsive WordPress Grid响应式网格插件是一个高级 wordpress 网格插件&#xff0c;它允许您在完全可定制且响应迅速的网格系统中展示任何自定义帖子类型。 Grid WordPress 非常适合展示您的博…

C++设计模式之——命令模式

命令模式 概念创建步骤示例示例一代码实现运行结果 示例二代码实现运行结果 示例三示例代码运行结果 示例四代码实现运行结果 应用场景 概念 命令模式是一种行为型设计模式&#xff0c;它允许将请求封装为一个对象&#xff0c;从而使得可以参数化客户端请求、将请求排队或者记…

使用opencv的Sobel算子实现图像边缘检测

1 边缘检测介绍 图像边缘检测技术是图像处理和计算机视觉等领域最基本的问题&#xff0c;也是经典的技术难题之一。如何快速、精确地提取图像边缘信息&#xff0c;一直是国内外的研究热点&#xff0c;同时边缘的检测也是图像处理中的一个难题。早期的经典算法包括边缘算子方法…

VMware----基于 VMware 玩转 CentOS 虚拟机创建、克隆以及配置后台运行

查看原文 文章目录 一、安装 Vmware二、创建 CentOS7 系统的虚拟机三、克隆虚拟机四、设置虚拟机后台运行 一、安装 Vmware &#xff08;1&#xff09;打开VMware下载地址页面&#xff0c;滑动页面&#xff0c;找到如下界面&#xff0c;点击【下载】 &#xff08;2&#xff…

基于VGG-16+Android+Python的智能车辆驾驶行为分析—深度学习算法应用(含全部工程源码)+数据集+模型(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 模型构建3. 模型训练及保存1&#xff09;模型训练2&#xff09;模型保存 4. 模型生成1&#xff09;模型导入及调用2&#xff09;相关代码&#xff08;1&#xff09;布局文件&#xff08;2&#xff…

Python 实现:OCR在图片中提取文字(基于Gradio实现)

Paddle OCR PaddleOCR 基于深度学习技术实现的&#xff0c;使用十分简单。 先看效果 可以看出来识别效果还是不错的&#xff0c;里面的“湿”字识别成了繁体字。如果不是连体字&#xff0c;就不会出现这个问题。 1.测试环境 操作系统&#xff1a;Win10 Python&#xff1a;3…

【Linux】dump命令使用

dump命令 dump命令用于备份文件系统。使用dump命令可以检查ext2/3/4文件系统上的文件&#xff0c;并确定哪些文件需要备份。这些文件复制到指定的磁盘、磁带或其他存储介质保管。 语法 dump [选项] [目录|文件系统] bash: dump: 未找到命令... 安装dump yum -y install …

ros2+在Ubuntu上安装gazebo

Binary Installation on Ubuntu(Ubuntu上binary方式安装gazebo) Harmonic binaries are provided for Ubuntu Jammy (22.04) and Ubuntu 24.04 (when its released). &#xff08;在Ubuntu22.04或者24.04上都是安装Harmonic版本的gazebo&#xff09;The Harmonic binaries are…

【Stm32-F407】全速DAP仿真器下载程序

文章内容如下: 1) 全速DAP仿真器简介2) 全速DAP仿真器下载程序流程 1) 全速DAP仿真器简介 1&#xff09;全速DAP仿真器简介 DAP全称 Data Acquisition Processor&#xff0c;是一种用于数据采集和实时控制的设备。本文使用的全速DAP仿真器遵循ARM公司的CMSIS-DAP标准&#xff…

2023-12-18 最大二叉树、合并二叉树、二叉搜索树中的搜索、验证二叉搜索树

654. 最大二叉树 核心&#xff1a;记住递归三部曲&#xff0c;一般传入的参数的都是题目给好的了&#xff01;把构造树类似于前序遍历一样就可&#xff01;就是注意单层递归的逻辑&#xff01; # Definition for a binary tree node. # class TreeNode: # def __init__(se…