dhtmlx Gantt实例介绍分析

 


API地址:https://docs.dhtmlx.com/gantt/desktop__guides.html,这是英文的网页,可以用谷歌打开然后页面翻译,就是中文的啦!

我用的是DHTMLX Gantt============Version 5.2.0,当时下载的实例:链接:https://pan.baidu.com/s/1SQsawUEr8YrayWPHi6QdgQ ,提取码:32wz。去官网下载也是可以的。


https://docs.dhtmlx.com/gantt/samples/官网的示例Version 5.2.0

 

转载于:https://www.cnblogs.com/CarryYou-lky/p/10701762.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`dhtmlxGantt` 是一个用于创建 Gantt 图的 JavaScript 库,它允许开发者以交互的方式绘制项目计划、管理任务及其依赖关系等。当涉及到列表点击事件时,`dhtmlxGantt` 提供了丰富的功能使得用户可以对任务进行自定义操作。 ### 点击事件的基本设置 在 `dhtmlxGantt` 中,你可以通过添加事件监听器到特定元素上来处理点击事件。通常,你会在任务节点上设置点击事件。这可以通过修改配置选项或者直接在 HTML 结构中添加事件处理器来完成。 #### 示例代码 假设我们已经初始化了一个基本的 `dhtmlxGantt` 实例,并将任务列表展示出来: ```html <div id="gantt"></div> <script> var gantt = new dhtmlXGanttObject({ width: 800, height: 600, autoGridWidth: true, gridWidth: 450, start_date: '2023-01-01', end_date: '2023-07-01', view: "timeline", tasklist_id: "tasklist" }); // 初始化之后添加点击事件处理器 document.getElementById('gantt').addEventListener('click', function(event) { if (event.target.classList.contains('dhx_gantt_task')) { // 检查是否是任务节点被点击 var taskId = event.target.getAttribute('data-taskid'); // 获取任务ID alert("您点击的任务ID是:" + taskId); } }); </script> ``` 在这个例子中,当用户点击任务列表中的任何一个任务时,浏览器会弹出一个提示框显示该任务的唯一 ID。 ### 更高级的应用场景 除了简单的点击事件外,`dhtmlxGantt` 还支持更复杂的功能,如条件触发事件、拖放任务、改变任务状态等。例如,你可以通过自定义事件处理器来响应任务的状态变更、开始日期调整或者结束日期调整等事件。 ### 配置和自定义 `dhtmlxGantt` 的灵活性也在于它的配置选项。通过调整这些配置项,你可以控制哪些事件应该被触发以及如何触发它们。此外,`dhtmlxGantt` 的 API 允许你动态地添加、删除或更新任务数据,从而实现在用户点击事件后执行相应的业务逻辑。 ### 相关问题: 1. 如何在点击事件中访问更多的任务属性信息? 2. 如何利用 `dhtmlxGantt` 的API实现动态调整任务间的依赖关系? 3. `dhtmlxGantt` 是否提供针对特殊需求的插件或扩展包?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值