Dhtmlx Gantt 常用方法及基本配置合集

2023-10-28 19:50

本文主要是介绍Dhtmlx Gantt 常用方法及基本配置合集,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

甘特图基本配置

使用依赖

甘特图扩展功能

gantt.plugins({tooltip: true,quick_info: true,// 快速信息框// multiselect: true,// 激活多任务选择});

甘特图任务悬浮框位置

 gantt.config.tooltip_offset_x = 10;gantt.config.tooltip_offset_y = 30;

激活列表展开(折叠)功能

gantt.config.open_split_tasks = true;

创建新事件通过点击“+”按钮打开灯箱

gantt.config.details_on_create = true;

甘特图图表宽度自适应

gantt.config.autofit = true;

用户可以通过拖拽调整行高

 gantt.config.resize_rows = true;

界面初始化时展开图表树形结构

gantt.config.open_tree_initially = true;

图表项目栏可以任意拖拽(任意节点下)

  gantt.config.order_branch = true;gantt.config.order_branch_free = true;

新增空白列后新增项目

gantt.config.placeholder_task = true;

图表刷新后位置不变

 gantt.config.preserve_scroll = true;gantt.config.round_dnd_dates = true;

设置甘特图表头高度

  gantt.config.scale_height = 50;

是否显示依赖连线(取消)

gantt.config.show_links = true;

点击表头可排序

gantt.config.sort = true;

激活/禁用“quick_info”扩展(弹出任务的详细信息表单)

gantt.plugins({tooltip: true,quick_info: true,// 快速信息框});
gantt.config.show_quick_info = true;

点击表头可排序

gantt.config.sort = true;

设置行高

gantt.config.row_height = 44;

允许拖放

gantt.config.drag_project = true;

配置甘特图时间刻度高度

gantt.config.scale_height = 40;

设置甘特图时间的起始结束时间,并允许显示超过时间刻度任务

gantt.config.start_date = new Date(`${new Date().getFullYear()-2},${new Date().getMonth()},${new Date().getDay()}`)gantt.config.end_date = new Date(`${new Date().getFullYear()+2},${new Date().getMonth()},${new Date().getDay()}`)gantt.config.show_tasks_outside_timescale = true

设置时间刻度相关属性

  gantt.config.scales = [{ unit: "year", step: 1, format: "%Y" },{ unit: "month", step: 1, format: "%M" },];

配置任务内部显示元素

(用户可自定义任务内部显示内容)

 gantt.templates.task_text = function (start, end, task) {return `<span style="margin-left:10px;color:white;">${task.text}</span>`;};

配置Gantt内置弹出框元素(title内容)

gantt.templates.lightbox_header = function (start_date, end_date, task) {return `<b>${task.text}</b>`
};

配置Gantt内置弹出框元素

(此处除了 description 与 time 为gantt内置弹出框元素其余为自定义元素

【 自定义元素详细配置方法在另外一篇文章解释 

  gantt.config.lightbox.sections = [{name: "description",height: 36,map_to: "text",type: "textarea",focus: true,},{ name: "time", type: "duration", map_to: "auto" },{name: "Participants",height: 36,map_to: "Participants",type: "ParticipantsPlan",focus: true,},{name: "BgColor",height: 36,map_to: "color",type: "ParticipantsPlanColor",focus: true,},];

Gantt除了配置基本也可以配置指定元素弹出框

    // 配置任务灯箱gantt.config.lightbox.project_sections= [{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},{name: "type", type: "typeselect", map_to: "type"},{name: "time", type: "duration", readonly: true, map_to: "auto"}];// 配置里程碑灯箱gantt.config.lightbox.milestone_sections= [{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},{name: "type", type: "typeselect", map_to: "type"},{name: "time", type: "duration", single_date: true, map_to: "auto"}];

控制网格区域的样式(类名)

 gantt.templates.grid_row_class = function (start, end, task) {console.log("网格class", start, end, task);};

日期网格配置

  gantt.templates.date_grid = function(date, task, column){console.log('日期网格',date,task,column)if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled){return gantt.templates.task_unscheduled_time(task);}else{return gantt.templates.grid_date_format(date);}}

配置网格缩进

gantt.templates.grid_indent = function(item){return '<div class="gantt_tree_indent" style="display:none"></div>'}

网格内容配置

【 自定义元素详细配置方法在另外一篇文章解释 

gantt.config.columns=[{name:"text",       label:"Task name",  tree:true, width:'*' },{name:"start_date", label:"Start time", align: "center" },{name:"duration",   label:"Duration",   align: "center" },{name:"add",        label:"" }
];

任务的日期(格式化)

 gantt.templates.task_date= function(date){return gantt.date.date_to_str(gantt.config.task_date)(date);};

鼠标悬浮工具提示文本配置

【 此功能属于扩展功能需单独配置 】

 gantt.plugins({tooltip: true});
 gantt.templates.tooltip_text = function (start, end, task) {return ("<b>标题:</b> " +task.text +"<br/><span>开始:</span> " +gantt.templates.tooltip_date_format(start) +"<br/><span>结束:</span> " +gantt.templates.tooltip_date_format(end) +"<br/><span>进度:</span> " +Math.round(task.progress * 100) +"%");};

Gantt内置方法

return true 的含义是执行,默认即可 ,如果需要自定义 return fasle。便不会执行内置方法

双击任务触发(每一行)

gantt.attachEvent("onTaskDblClick", function (id, e) {return true})

将任务添加到Gantt之前触发

gantt.attachEvent("onAfterTaskAdd",function(id,item){return true})

用户选择任务时触发

gantt.attachEvent("onTaskSelected",function(id){return true})

用户悬停Gantt时触发

gantt.attachEvent("onMouseMove",function(id,e){})

用户拖拽任务后释放鼠标之后,应用更改之前触发

gantt.attachEvent("onAfterTaskDrag",function(id,mode,e){return true})

点击“+”进行添加任务操作触发

gantt.attachEvent("onTaskCreated",function(task){return true})

用户打开Gantt内置弹出框之前触发

gantt.attachEvent("onBeforeLightbox",function(id){return true})

获取进度条进度

 gantt.templates.progress_text = function (start, end, task) {return Math.round(task.progress * 100) + "%";};

获取拉杆状态

 gantt.templates.drag_link = function (from, from_start, to, to_start) {console.log("拉杆from", from, from_start, to, to_start);// return text;};

获取拖动链接类

 gantt.templates.drag_link_class = function (from,from_start,to,to_start ) {console.log("from", from, from_start, to, to_start);};

层级折叠监听

// 监听折叠动作(打开)
gantt.attachEvent("onTaskOpened", function(taskId) {// console.log('节点状态(开)',gantt.getTask(taskId))
});
// 监听折叠动作(关闭)
gantt.attachEvent("onTaskClosed", function(taskId) {// console.log('节点状态(关)',gantt.getTask(taskId))
});

以上是项目中所用到的部分方法,详细内容可查看官方文档。

Gantt Docs

这篇关于Dhtmlx Gantt 常用方法及基本配置合集的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/295564

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、