彩票走势图

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

翻译|使用教程|编辑:秦林|2022-11-09 09:41:15.437|阅读 197 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:


本文给大家讲解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
<?php
    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");
?>

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


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

慧都年终狂欢季,全场产品,限时特惠,立即了解详情!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP