项目管理工具DHTMLX Gantt灯箱元素配置教程：如何添加单选按钮

这篇文章给大家讲解DHTMLX Gantt如何将单选按钮添加到灯箱元素，欢迎大家下载最新版试用体验。

一次只能选择其中一个选项块，如下图所示：

1、初始化

要将单选按钮控件添加到灯箱，请按照下列步骤操作：

1）在灯箱配置中添加一个部分：

var opts = [    {key: 1, label: "High"},    {key: 2, label: "Normal"},    {key: 3, label: "Low"}                              ];gantt.config.lightbox.sections = [    {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},    {name: "priority", height: 22, map_to: "priority", type: "radio", options: [opts]},    {name: "time", type: "duration", map_to: "auto"}];

2）为该部分设置标签：

gantt.locale.labels.section_priority = "Priority";

2、属性

以下属性最重要并且通常为复选框控件设置：

名称- （字符串）部分名称

map_to -（字符串）将映射到该部分的数据属性的名称

type -（字符串）节控件的类型

options – ( array ) 对象数组。定义控件的选择选项（用于选择、复选框和单选控件）。数组中的每个对象都指定一个选项并具有以下属性：

key – ( string ) 选项 id。此属性与任务数据属性进行比较，以将选项分配给任务

label -（字符串）选项标签

focus -（布尔值）如果设置为true，该部分将聚焦于打开灯箱

default_value – ( any ) 部分控件的默认值。仅在输入值未定义时应用

3、用数据填充控件

通常，要为单选按钮控件设置值，请使用选项参数：

gantt.config.lightbox.sections = [     {name: "priority", map_to: "priority", type: "radio", options: [        {key: 1, label: "High"},        {key: 2, label: "Normal"},        {key: 3, label: "Low"},    ]} ];

options参数中的项目有 2 个强制属性：

• key – 选项 id
• label – 选项标签

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。2022年终狂欢火热进行中，知名软控件产品享超低折扣，满额豪礼赠，复购双重大礼！了解更多内容，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：