项目管理工具DHTMLX Gantt灯箱元素配置教程：选择性控制组件

本文给大家讲解DHTMLX Gantt如何对控件选择性控制，欢迎大家下载最新版试用体验。

下拉列表框如下所示：

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

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:"select",options:opts},                                                                   {name:"time", height:72, type:"duration", map_to:"auto"}];

2、给部分设置标签：

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

2、属性

以下属性最重要且通常用的时间控属性：

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

name – (字符串) 部分名称

高度- （数字）截面高度

map_to – ( string ) 将被映射到该部分的数据属性的名称

type – ( string )部分控件的类型

focus – ( boolean ) 如果设置为true，该部分将专注于打开灯箱

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

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

label – ( string ) 选项标签

default_value – ( any ) 该部分控件的默认值。仅在输入值不足时应用

onchange – ( function ) 为该部分的控件指定“onChange”事件处理函数

3、用数据填充控件

通常，要为选择控件设置值，请使用options参数：

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

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

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

4、使用来自服务器的数据填充

要从服务器填充控件，请将options选项设置为serverList方法返回的值：

gantt.config.lightbox.sections = [    {name:"description", ...},    { name:"priority",map_to:"priority",type:"select",        options:gantt.serverList("priority")},    {name:"category", map_to:"category", type:"select",        options:gantt.serverList("category")},    {name:"time", ...}];gantt.init("gantt_here");gantt.load("/data");

/data url的输出如下：

{  "tasks":[    {"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},    {"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},    {"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}  ],  "links":[    {"id":1,"source":1,"target":2,"type":"1"},    {"id":2,"source":2,"target":3,"type":"0"}  ],  "collections": {    "priority":[        {"value":"1","label":"Low"},        {"value":"2","label":"Medium"},        {"value":"3","label":"High"}    ],    "category":[        {"value":"1","label":"Simple"},        {"value":"2","label":"Complex"},        {"value":"3","label":"Unknown"}    ]  }}

通过 dhtmlxConnector 加载选项，以下是dhtmlxConnector初始化的示例：

//data.php<hp    include('connector-php/codebase/gantt_connector.php');    $res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");    $list = new OptionsConnector($res);    $list->render_table("priorities","id","id(value),name(label)");    $gantt = new JSONGanttConnector($res);    $gantt->set_options("priority", $list);    $gantt->render_links("gantt_links","id","source_task(source),                    target_task(target),type");     $gantt->render_table("gantt_tasks","id","start_date,duration,text,progress,                    sortorder,parent");gt;

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

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

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

标签：

来源：慧都