项目管理工具DHTMLX Gantt灯箱元素配置教程：模板设置和控制

本文给大家讲解DHTMLX Gantt如何进行模板控制以及常用的设置，欢迎大家下载最新版试用体验。

里面有一些HTML内容的容器。

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"template", height:16, type:"template", map_to:"my_template"},    {name:"time", height:72, type:"duration", map_to:"auto"}];gantt.locale.labels.section_template = "Details";gantt.attachEvent("onBeforeLightbox", function(id) {    var task = gantt.getTask(id);    task.my_template = "<span id='title1'>Holders: </span>"+ task.users    +"<span id='title2'>Progress: </span>"+ task.progress*100 +" %";    return true;});

1、初始化

按照以下步骤将模板控件添加到lightbox中:

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

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"template", height:16, type:"template", map_to:"my_template"},    {name:"time", height:72, type:"duration", map_to:"auto"}];

2、为章节设置标签:

gantt.locale.labels.section_template = "Details";

3、通过一些事件的帮助来设置控件的内容，例如onBeforeLightbox事件:

gantt.attachEvent("onBeforeLightbox", function(id) {    var task = gantt.getTask(id);    task.my_template = "<span id='title1'>Holders: </span>"+ task.users    +"<span id='title2'>Progress: </span>"+ task.progress*100 +" %";    return true;});

2、属性

Name -(字符串)section名称

高度-(数字)截面高度

Map_to -(字符串)将映射到该节的数据属性的名称

Type -(字符串)section控件的类型

Focus – (boolean)如果设置为true，该section将在打开lightbox时获得焦点

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

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

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

标签：

来源：慧都