UI库DHTMLX Suite v8.2发布全新表单组件，让Web表单实现高度可定制！

news2025/1/9 14:32:03

DHTMLX Suite v8.2日前已正式发布，此版本的核心是DHTMLX Form，这个小部件接收了4个备受期待的新控件，如Fieldset、Avatar、Toggle和ToggleGroup。官方技术团队还为Grid和TreeGrid小部件中的页眉/页脚工具提示提供了一系列新的配置选项等。

在本文中，我们提供了这个版本的详细概述。

DHTMLX Suite v8.2正式版下载

DHTMLX Form的新控件

DHTMLX Form是DHTMLX Suite JavaScript UI小部件库中的一个流行小部件，它允许用户实现可定制的Web表单，这些表单通常作为web应用程序和最终用户之间的关键通信链接。在v8.2中，技术团队用4个新控件扩展了这个小部件的功能。

Fieldset控件

Fieldset控件的目的是让用户完全自由地对Web表单中的其他控件进行分组，这个控件使您能够在视觉上将表单分解为几个逻辑部分，从而使大型表单结构更好、更直观。它允许用户创建复杂的表单，其中一个字段集可以包含其他几个具有嵌套控件的字段集。

要将此控件附加到使用DHTMLX构建的表单，需要添加相应的控件类型 - type: “fieldset”，多个配置属性为指定控件设置提供了广泛的选项选择。例如您可以为控件指定名称、添加必要的标签、在组内安排控件等。

const form = new dhx.Form("form", {
rows: [
{
type: "fieldset",
label: "General Info",
rows: [
{
align: "between",
cols: [
{
type: "fieldset",
label: "Personal info",
rows: [
{
type: "input",
label: "Name",
},
{
type: "input",
label: "Surname",
},
]
},
{
type: "fieldset",
label: "Contact info",
rows: [
{
type: "input",
label: "City",
},
{
type: "input",
label: "Address",
},
]
},
]
},
]
},
]
});

DHTMLX Suite v8.2新版图集

您可以通过getItem()方法访问Fieldset中的任何控件，并使用多个方法和事件与之交互。例如，可以使用forEach() 方法遍历所有嵌套的字段集元素，它接受以下参数：

  • callback: function – 负责迭代过程的函数，该函数使用以下参数调用：
    1. item: object – 一个项目的对象
    2. index: number – 项目的索引
    3. array: object[] – 迭代项目的数组
  • tree: boolean – 确定是否应该迭代所有嵌套字段集项的参数(默认为false)

form.getItem("fieldset").forEach((item, index, arr) => {
console.log(index, item, arr);
}, true);

有了新的Fieldset控件，您就有了一个有效的工具，可以在单个web表单中分组各种控件，并根据自己的喜好灵活地调整这些控件的结构。

Avatar控件

标准的Web表单通常包含用于收集文本数据的控件，但也可能需要有一个上传图像的选项。从v8.2开始，DHTMLX Form允许使用新的Avatar控件向表单添加图像。

下面的示例提供了一个机会来了解这种控件在实践中是如何工作的，您可以使用占位符图标或拖放方式将自己的图像添加到表单中，然后将其删除，并更改Avatar设置。

DHTMLX Suite v8.2新版图集

要将此控件添加到网页中，必须在表单初始化时在type属性中指定它：

const form = new dhx.Form("form", {
css: "dhx_widget--bordered",
padding: 20,
rows: [{
type: "avatar",
"label": "Employee photo",
"size": "medium", // "small" | "medium" | "large" | number
"icon": "dxi dxi-person",
"accept": "image/*",
"target": "https://docs.dhtmlx.com/suite/backend/upload",
...
//Other properties
}]
});

从上面的代码中可以看到，这个控件有许多属性，允许您定义最终用户如何看到它。可以使用基本控制大小或应用自定义大小，使这种类型的输入是强制性的，添加帮助信息，在没有上传图像时设置占位符图标等。

就像DHTMLX Form的其他控件一样，Avatar控件也提供了一系列方法和事件，使您能够以各种方式操作该控件。

例如，您可以通过使用accept和validation属性应用某些验证规则来限制文件选择：

const form = new dhx.Form("form", {
css: "dhx_widget--bordered",
padding: 40,
rows: [
{
type: "avatar",
...
accept: "image/png",
validation: ({ file }) => {
return file && file.size <= 2097152;
},
preMessage: "Choose a png file",
errorMessage: "The file size is more than 2Mb, or the field is empty",
successMessage: "The file was successfully validated",
},
]
});

accept属性为上传的文件定义了可接受的扩展名(image和png)，而validation属性检查文件是否被上传并且它的大小小于2mb。您也可以使用preMessage, errorMessage和successMessage属性使最终用户与Avatar控件的交互完全直接，使用这些属性实现的文本消息将帮助最终用户了解他们在上传表单中的文件时是否做对了。

Toggle和ToggleGroup控件

Toggle控件是一种特殊的按钮，用于帮助最终用户在两个或多个状态或选项之间切换。它们通常显示为紧凑的按钮，并带有其状态的图形文本表示。在DHTMLX Suite 8.2中，我们为DHTMLX表单添加了两种类型的切换按钮：

  • Toggle – 是一个按两种状态(例如开/关)原理工作的按钮。

DHTMLX Suite v8.2新版图集

...
rows: [
{
type: "toggle",
icon: "dxi dxi-eye",
offIcon: "dxi dxi-eye-off",
},
...
  • ToggleGroup – 一组在结构上或逻辑上连接在一起的单选择或多选择按钮。

DHTMLX Suite v8.2新版图集

...
{
type: "toggleGroup",
multiselection: true,
value: {
left: true,
center: true,
},
options: [
{
id: "left",
icon: "dxi dxi-format-align-left",
value: 1,
},
{
id: "center",
icon: "dxi dxi-format-align-center",
value: "center"
},
{
id: "right",
icon: "dxi dxi-format-align-right
},
{
id: "space",
icon: "dxi dxi-format-line-spacing",
disabled: true,
}
]
}
...

ToggleGroup按钮具有比简单切换按钮更多的功能，上面提供的多选择示例只是ToggleGroup的多种使用场景之一，您可以在这个示例中找到更多新按钮类型的用例。

Grid/TreeGrid页眉和页脚的工具提示

新版本的DHTMLX Suite库在两个数据管理小部件(Grid和TreeGrid)中扩展了工具提示的配置多样性，以前整个网格的工具提示是通过相应的工具提示属性启用/禁用的，现在您有了几种新的方法来为页眉和页脚指定单独的工具提示。由于这两个小部件的所有新配置选项都是相似的，所以让我们以DHTMLX Grid为例来看看它们是如何工作的。

首先，有新的headerTooltip和footerTooltipp配置属性，可以让您完全控制网格页眉和页脚的工具提示。

const grid = new dhx.Grid("grid_container", {
columns: [
// columns config
],
data: dataset,
tooltip: false,
headerTooltip: true,
footerTooltip: true,
});

如果需要，还可以为特定网格列的页眉/页脚启用工具提示。要做到这一点，您应该在列内相应的header/footer对象中指定tooltip属性：

const grid = new dhx.Grid("grid", {
columns: [
{ id: "country", header: [{ text: "Country", tooltip: true }] },
{ id: "population", header: [{ text: "Population" }] },
// more columns
],
data: dataset,
tooltip: false,
});

或者，您可以通过tooltipTemplate配置属性中指定的模板为整个网格(或特定列)的页眉/页脚提供自定义工具提示。从现在开始，工具提示也可以显示为列的复杂页眉/页脚内容的值，例如聚合函数(“avg”，“sum”，“max”，“min”，“count”)。此外，您有机会为任何类型的页眉/页脚内容使用模板，这意味着可以为过滤器等元素添加工具提示。下面，你可以看到这些新奇的东西是如何实现和付诸实践的。

const grid = new dhx.Grid("grid", {
columns: [
{
id: "title",
tooltipTemplate: (value) => `Book: ${value}`,
header: [
{
text: "Title",
tooltipTemplate: () => `Here can be an explanation for the title of this column. You can write a long description.`
},
{
content: "inputFilter",
tooltipTemplate: () => `Write something to search by book title`
},
],
},
{
id: "authors",
...
footer: [{ content: "count" }]
},
// more columns
});

DHTMLX Suite v8.2新版图集

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Scrum敏捷开发流程及关键环节

Scrum敏捷开发流程及关键环节

​Scrum是一种敏捷开发流程&#xff0c;它旨在使软件开发更加高效和灵活。Scrum将软件开发过程分为多个短期、可重复的阶段&#xff0c;称为“Sprint”。每个Sprint通常为两周&#xff0c;旨在完成一部分开发任务。 在Scrum中&#xff0c;有一个明确的角色分工&#xff1a; 产…
阅读更多...
一个好玩的浏览器插件

一个好玩的浏览器插件

背景 最近抽空开发了一个有意思的浏览器插件。背景是我们在开发过程中有时需要做一些测试验证&#xff0c;需要修改请求头字段和响应头字段的内容&#xff0c;有时需要在页面做测试&#xff0c;反复请求同一个接口&#xff0c;并修改一些字段。 如果此时使用nginx做代理转发再…
阅读更多...
HashMap、HashTable、CurrentHashMap对比

HashMap、HashTable、CurrentHashMap对比

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;Java、集合、Map、CurrentHashMap☀️每日 一言&#xff1a;坚持自己的风格&#xff0c;面对未知的一切&#xff01; 一、HashMap、HashTable、CurrentHashMap对比 1.1 CurrentHashMap和HashMap…
阅读更多...
9.多级缓存、JVM进程缓存、Lua语法

9.多级缓存、JVM进程缓存、Lua语法

多级缓存 文章目录 多级缓存一、多级缓存介绍1.1 传统缓存的问题1.2 多级缓存方案 二、JVM进程缓存2.1 案例准备2.1.1 导入SQL2.1.2 导入item-service项目2.1.3 导入商品查询页面 2.2 初始 Caffeine2.2.1 基本用法 2.3 实现进程缓存 三、Lua语法3.1 初识Lua3.2 变量和循环3.2.1…
阅读更多...
这篇文章是用AI大模型自动生成的

这篇文章是用AI大模型自动生成的

昨天用豆包AI大模型尝试生成了一段关于&#xff1a;企业转型、企业转型的要点、企业转型成功的标志&#xff0c;这样的文字。我又加了点自己的思考。 &#xff08;1&#xff09;企业转型的原因 企业转型的原因有很多&#xff0c;以下是一些常见的原因&#xff1a; 1. 市场变化&…
阅读更多...
针对电子企业的WMS仓储管理系统解决方案

针对电子企业的WMS仓储管理系统解决方案

随着全球电子行业的快速发展&#xff0c;电子企业对于仓储管理的需求和挑战也日益增长。WMS仓储管理系统作为电子企业的核心管理工具&#xff0c;需要满足高效率、低成本、高灵活性以及精确控制库存等需求。本文将为电子企业提供一种针对WMS仓储管理系统的解决方案。 一、WMS仓…
阅读更多...
Eclipse使用SFTP方式远程连接

Eclipse使用SFTP方式远程连接

安装插件 首先需要安装远程系统连接插件&#xff0c;安装方式可参考&#xff1a; Eclipse安装FTP连接工具_哭哭啼的博客-CSDN博客在过滤器字段中,键入"remote".选择Mobile and Device Development&#xff0c;并选择。找到Remote System Explorer->Connection。…
阅读更多...
Outlook邮箱如何设置自动回复

Outlook邮箱如何设置自动回复

很多小伙伴在刚开始使用Outlook邮箱的时候&#xff0c;不是很清楚Outlook邮箱如何设置自动回复&#xff0c;这里小编就给大家详细介绍一下Outlook邮箱设置自动回复的方法&#xff0c;有需要的小伙伴可以来看一看。 Outlook邮箱设置自动回复的方法&#xff1a; 1、打开软件&am…
阅读更多...
ARM-M0内核MCU，内置24bit ADC，采样率4KSPS，传感器、电子秤、体脂秤专用，国产

ARM-M0内核MCU，内置24bit ADC，采样率4KSPS，传感器、电子秤、体脂秤专用，国产

ARM-M0内核MCU 内置24bit ADC &#xff0c;采样率4KSPS flash 64KB&#xff0c;SRAM 32KB 适用于传感器&#xff0c;电子秤&#xff0c;体脂秤等等
阅读更多...
QML android 采集手机传感器数据 并通过udp 发送

QML android 采集手机传感器数据 并通过udp 发送

利用 qt 开发 安卓 app &#xff0c;采集手机传感器数据 并通过udp 发送 #ifndef UDPLINK_H #define UDPLINK_H#include <QObject> #include <QUdpSocket> #include <QHostAddress>class UdpLink : public QObject {Q_OBJECT public:explicit UdpLink(QObjec…
阅读更多...
Win10无法访问你可能没有权限使用网络资源怎么解决

Win10无法访问你可能没有权限使用网络资源怎么解决

当我们使用Win10电脑打开文件时&#xff0c;弹出提示无法访问你可能没有权限使用网络资源&#xff0c;这是怎么回事&#xff0c;遇到这种问题应该怎么解决呢&#xff0c;下面小编就给大家详细介绍一下Win10无法访问你可能没有权限使用网络资源的解决方法&#xff0c;有需要的小…
阅读更多...
使用亚马逊云科技人工智能内容审核服务，打造安全的图像生成和扩散模型

使用亚马逊云科技人工智能内容审核服务，打造安全的图像生成和扩散模型

生成式人工智能技术发展日新月异&#xff0c;现在已经能够根据文本输入生成文本和图像。Stable Diffusion 是一种文本转图像模型&#xff0c;可让您创建栩栩如生的图像应用。您可以通过 Amazon SageMaker JumpStart&#xff0c;使用 Stable Diffusion 模型轻松地从文本生成图像…
阅读更多...
继续聊聊API接口

继续聊聊API接口

什么是API接口 API接口(Application Programming Interface Interface)是应用程序与开发人员或其他程序互相通信的方式。它允许开发者访问应用程序的数据和功能。 API接口,软件的“握手”与“交流”之道,软件世界的“好基友”。想让软件聊得来?想开发App却无从下手?API来相救…
阅读更多...
一文讲清楚：SaaS系统是什么？优势在哪？盘点国内行业龙头SaaS系统！

一文讲清楚：SaaS系统是什么？优势在哪？盘点国内行业龙头SaaS系统！

SaaS系统究竟是什么&#xff1f;应该如何了解SaaS系统&#xff1f;在SaaS系统飞速发展的2023年&#xff0c;国内涌现出了一大批优秀的SaaS系统公司&#xff0c;都有哪些企业位列其中呢&#xff1f;SaaS系统有着什么样独特的竞争力&#xff0c;能够不断发展&#xff0c;成为目前…
阅读更多...
无涯教程-JavaScript - NPER函数

无涯教程-JavaScript - NPER函数

描述 NPER函数基于定期,固定付款和固定利率返回投资的期数。 语法 NPER (rate,pmt,pv,[fv],[type])争论 Argument描述Required/OptionalRateThe interest rate per period.RequiredPmt 在每个期间付款。 在年金的使用期限内,它不能改变。 通常,pmt包含本金和利息,但不包含其…
阅读更多...
快递物流博览会开幕，多家快递企业黑科技齐聚亮相

快递物流博览会开幕，多家快递企业黑科技齐聚亮相

快递物流供应链|分拣系统|AGV机器人|新能源物流车|绿色包装|自动识别|冷链物流 2024年4月12-14日 | 杭州国际博览中心 同期展会&#xff1a;2024中国数字物流技术与应用展 2024国际电商物流包装产业展 2024新能源商用车、物流车展 指导单位&#xff1a;浙江省邮政管理局 中…
阅读更多...
c++ 学习之类型，常量以及变量的重点知识

c++ 学习之类型，常量以及变量的重点知识

const 和 volatile 组合考点 const int ( * ) 等价于 int const ( * ) const int x 1 ; 说明 x 是常量&#xff0c;无法修改 如何区分指针常量和常量指针 指针常量 为 先有指针后有常量 故为 形式如 &#xff1a; int * const p & x ; 且const 修饰的是 p &#xff0c…
阅读更多...
Falcon 180B 目前最强大的开源模型

Falcon 180B 目前最强大的开源模型

Technology Innovation Institute最近发布了Falcon 180B大型语言模型(LLM)&#xff0c;它击败了Llama-2 70b&#xff0c;与谷歌Bard的基础模型PaLM-2 Large不相上下。 180B是是Falcon 40B模型一个最新版本。以下是该模型的快速概述: 180B参数模型&#xff0c;两个版本(base和…
阅读更多...
基于Python+Django实现一个电商购物网站系统

基于Python+Django实现一个电商购物网站系统

随着互联网的高速发展&#xff0c;电子商务行业也正迎来了其黄金时代。如何搭建一个功能完备、体验良好的电商网站成了许多开发者的关心话题。今天&#xff0c;我将带大家使用Python语言和Django框架&#xff0c;快速打造一个电商购物系统。如果你有一定的Python基础&#xff0…
阅读更多...
java Math类中的random方法和Random类中方法的区别

java Math类中的random方法和Random类中方法的区别

文章目录 Math类中的random()方法Random类 Math类中的random()方法 Math类中的random()方法没有参数&#xff0c;它会默认返回等于0.0、小于1.0的double类型随机数。对double()方法返回的数字稍加处理&#xff0c;即可实现任意范围随机数的功能 public class MathTest {publi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023