4、Gantt 任务节点部分

已于 2022-11-02 14:52:24 修改
阅读量736 收藏 1
点赞数
分类专栏： DHTMLX Gantt
于 2022-05-07 18:35:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beauty_600/article/details/124636829
版权

DHTMLX Gantt API 任务管理 项目规划 数据操作
关键词由CSDN通过智能技术生成
  1. 获取任务节点
    https://docs.dhtmlx.com/gantt/api__gantt_gettask.html
gantt.addTask({
    id:7,
    text:"Task #5",
    start_date:"02-09-2013",
    duration:28
}, "pr_2");
 
gantt.getTask(7);
//->{id:7, text:"Task #5", start_date:"02-09-2013", duration:28, 
//   parent:"pr_2", $source:[1,5], $target:[8,13], ...}
  1. 返回下一项的 id（无论嵌套级别如何：相同或不同）
    https://docs.dhtmlx.com/gantt/api__gantt_getnext.html
在这里插入代码片
  1. 返回下一项的 id（无论嵌套级别如何：相同或不同）
    https://docs.dhtmlx.com/gantt/api__gantt_getparent.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
     open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getParent("t_1"); //-> "p_1" 
gantt.getParent("p_1"); //-> 0 (the default root id)
  1. 返回任务栏的 HTML 元素
    https://docs.dhtmlx.com/gantt/api__gantt_gettasknode.html
gantt.addTask({
    id:10,
    text:"Task #5",
    start_date:"02-09-2013",
    duration:28
}, "project_2");
 
gantt.getTaskNode(10);//-><div task_id=​"2" class=​"gantt_task_line" ​…​​>​​…​</div>​
  1. 返回表格中任务行的 HTML 元素
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskrownode.html
var taskId = gantt.addTask({
    id:10,
    text:"Task #5",
    start_date:"02-09-2013",
    duration:28
}, "project_2");
 
gantt.getTaskRowNode(10);//-><div class=​"gantt_row" task_id=​"2">​…​</div>​
  1. 按指定条件查找任务
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskby.html
// simple search
var userTasks = gantt.getTaskBy("user_id", 5);
 
// (task: object) => boolean
var userTasks = gantt.getTaskBy(function(task){
   return task.user_id == 5 || !task.user_id;
});
 
var userTasks = gantt.getTaskBy(task => task.user_id == 5);
  1. 通过 WBS 代码返回任务
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskbywbscode.html
var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Task #1, unscheduled: true, duration: 1, …}
  1. 返回任务的 WBS 代码（大纲编号）
    https://docs.dhtmlx.com/gantt/api__gantt_getwbscode.html
gantt.init("gantt_here");
 
gantt.parse({
 "data":[
  {"id":1, "text":"Project #1", "start_date":"28-03-2013", "duration":"11", 
    "parent":"0", "open": true},
  {"id":2, "text":"Task #1", "start_date":"01-04-2013", "duration":"18", "parent":"1"},
  {"id":3, "text":"Task #2", "start_date":"02-04-2013", "duration":"8", "parent":"1"}
 ],
 "links":[]
});
 
var wbs_code = gantt.getWBSCode(gantt.getTask(3)) // -> returns "1.2"
  1. 通过其全局任务索引返回任务
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskbyindex.html
var globalTaskIndex = gantt.getGlobalTaskIndex(19); // -> 10
 
var task = gantt.getTaskByIndex(10); 
// -> {id:"19", text:"Task name", type:"project", order:"10", progress:0.4, …}
  1. 返回指定时间段内发生的任务的集合
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskbytime.html
var tasks = gantt.getTaskByTime(new Date(2013,3,10),new Date(2013,4,10)); 
for (var i=0; i<tasks.length; i++){
       alert(tasks[i].text);
}
// or
var tasks = gantt.getTaskByTime();//returns all tasks
  1. 返回指定父分支的一级子任务
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
     open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getChildren("p_1");//->["t_1", "t_2"]
  1. 检查当前是否选择了指定的任务
    https://docs.dhtmlx.com/gantt/api__gantt_isselectedtask.html
gantt.templates.task_class = 
gantt.templates.grid_row_class = 
gantt.templates.task_row_class = function (start, end, task) {
    if (gantt.isSelectedTask(task.id))
        return "gantt_selected";
};
  1. 检查指定的任务是否存在
    https://docs.dhtmlx.com/gantt/api__gantt_istaskexists.html
    添加新任务
    https://docs.dhtmlx.com/gantt/api__gantt_addtask.html
gantt.addTask({
    id:10,
    text:"Task #5",
    start_date:"02-09-2013",
    duration:28
}, "project_2");
 
gantt.isTaskExists(10); // ->true
  1. 检查指定任务当前是否在甘特图中呈现
    https://docs.dhtmlx.com/gantt/api__gantt_istaskvisible.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
     open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.isTaskVisible("t_1"); // ->true
  1. 返回时间刻度的配置
    https://docs.dhtmlx.com/gantt/api__gantt_getscale.html
gantt.getScale();
  1. 获取甘特图中当前加载的任务数
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskcount.html
gantt.getTaskCount();
  1. 获取分支中任务的索引
    https://docs.dhtmlx.com/gantt/api__gantt_gettaskindex.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
        open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
        parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
        parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
var taskIndex = gantt.getTaskIndex("t_1"); // -> 0
var globalTaskIndex = gantt.getGlobalTaskIndex("t_1"); // -> 1
  1. 返回任务的类型
    https://docs.dhtmlx.com/gantt/api__gantt_gettasktype.html
var type = gantt.getTaskType(gantt.getTask(12));
  1. 返回数据存储的配置对象
    https://docs.dhtmlx.com/gantt/api__gantt_getdatastore.html
var tasksStore = gantt.getDatastore("task");
//获取所有的ID
gantt.getDatastore("task").fullOrder
//获取所有节点
gantt.getDatastore("task").pull
  1. 返回当前选定任务的数组
    https://docs.dhtmlx.com/gantt/api__gantt_getselectedtasks.html
gantt.getSelectedTasks();
// 这个方法是在multiselect扩展中定义的，所以需要激活multiselect插件。
gantt.plugins({
    multiselect: true
});
gantt.config.multiselect = true; // 多选
  1. 返回所选任务的 id
    https://docs.dhtmlx.com/gantt/api__gantt_getselectedid.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8, parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8, parent:"p_1"}
   ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.selectTask("t_1"); 
gantt.getSelectedId(); // -> "t_1"
  1. 选择指定的任务
    https://docs.dhtmlx.com/gantt/api__gantt_selecttask.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8, parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8, parent:"p_1"}
   ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.selectTask("t_1");

// 该方法调用onTaskSelected事件。
gantt.attachEvent("onTaskSelected", function(id){
    //any custom logic here
});
  1. 检查指定项目是否有子任务
    https://docs.dhtmlx.com/gantt/api__gantt_haschild.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
     open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.hasChild("p_1"); //-> true gantt.hasChild("t_1"); //-> false
  1. 获取屏幕上可见的任务数（未折叠的任务）
    https://docs.dhtmlx.com/gantt/api__gantt_getvisibletaskcount.html
gantt.getVisibleTaskCount();
  1. 更新指定的任务
    https://docs.dhtmlx.com/gantt/api__gantt_updatetask.html
var taskId = gantt.addTask({
    id:10,
    text:"Task #10",
    start_date:"02-04-2013",
    duration:8,
    parent:1
});
 
gantt.getTask(taskId).text = "Task #13"; //changes task's data
gantt.updateTask(taskId); //renders the updated task

gantt.attachEvent("onAfterTaskUpdate", function(id,item){
    //any custom logic here
});
  1. 打开具有指定 id 的分支
    https://docs.dhtmlx.com/gantt/api__gantt_open.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
gantt.open("p_1");

gantt.attachEvent("onTaskOpened", function(id) {
    //any custom logic here
});
  1. 关闭具有指定 id 的分支
    https://docs.dhtmlx.com/gantt/api__gantt_close.html
var tasks = {
  data:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
     open:true},
     {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
     parent:"p_1"},
     {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
     parent:"p_1"}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.close("p_1");

gantt.attachEvent("onTaskClosed", function(id) {
    alert("You've closed a branch with id="+id);
});
  1. 删除指定的任务
    https://docs.dhtmlx.com/gantt/api__gantt_deletetask.html
gantt.addTask({
    id:10,
    text:"Project #1",
    start_date:"02-09-2013",
    duration:28
});
 
gantt.deleteTask(10);
gantt.attachEvent("onBeforeTaskDelete", function(id,item){
    //any custom logic here
    return true;
});
gantt.attachEvent("onAfterTaskDelete", function(id,item){
    //any custom logic here
});
你在说啥-Lynn
关注
专栏目录
JQuery.Gantt（甘特图） 开发指南
www.itmmd.com
08-02 1600
  概述      JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。     源码下载      http://download.csdn.net/detail/aaakingwin/5550401 前端页面 资源引用      首先我们需要将下载到的源码中的CSS、IMG、JS等资源放入我们自...
Gantt_Chart-Task_Chart-1-配置task_chart的数据
acme_woo的专栏
01-14 967
 1. task chart 需要两个data provider:  1) task data provider包含任务数据, 可以是一级的或者多级的或者分组的数据, 使用TaskChart的taskDataProvider属性来设置, task chart的数据表格完全使用AdvancedDataGrid所提供的功能 2) constraint data provider包含约束数据
Gantt-Task-React 开源项目教程
最新发布
gitblog_00594的博客
08-09 611
Gantt-Task-React 开源项目教程 gantt-task-reactGantt chart for React with Typescript项目地址:https://gitcode.com/gh_mirrors/ga/gantt-task-react 项目介绍 Gantt-Task-React 是一个基于 React 的甘特图组件，旨在帮助开发者快速集成甘特图功能到他们的项目中。该...
gantt(甘特)图
stona126的专栏
10-24 3107
gantt图又叫甘特图。进度是按时间顺序计划活动的一个列表，我们称之为Ｇantt图，它有以下几个关键的成分：1.横跨图顶部排列的是日历表。2.最左边的一列包含了每项任务的标识号（ＩＤ）。3.左边第二列是要做的任务的名称。4.在图表当中，任务条表示各项任务计划的开始和结束时间。5.在表的左下方是项目名称、进度表的作者和制订此进度的原始日期。Gantt图是展现项目中各个任务进展状况的一种有用的工具
gantt甘特图插件
11-30
gantt图插件，根据国外的gantt.js修改，原版有BUG，修改后gantt环节上支持hover和click事件~
甘特图 Gantt 任务进度系统的日程安排与提醒功能
### 章节一：甘特图 Gantt 任务进度系统简介 甘特图 Gantt 任务进度系统在项目管理中扮演着至关重要的角色。本章将对甘特图 Gantt 任务进度系统进行全面介绍，包括其定义与概念、应用领域、以及重要性与作用。让...
甘特图 Gantt 任务进度系统中的任务管理与进度跟踪
## 1.1 甘特图 Gantt 任务进度系统的定义 甘特图是一种项目管理工具，以条状图形式显示任务的开始和完成时间。它将项目的所有任务以及它们之间的依赖关系清晰地表示出来，使项目团队能够更好地进行计划、调度和执行...
甘特图 Gantt 任务进度系统概述与实际应用
# 一、引言 ## 1.1 甘特图任务进度系统的介绍 ## 1.2 文章的目的和结构 在项目管理和进度跟踪中，甘特...随着信息技术的发展，甘特图任务进度系统已经成为项目管理中不可或缺的一部分。 ## 1.2 文章的目的和结构 ###
自定义gantt 甘特图使用例子
10-31
4. **DateTimeGrid.cpp**: 时间日期网格的实现，Gantt图通常需要一个时间轴来表示日期，此文件可能实现了这个功能，用于展示时间轴并允许用户在特定日期上定位任务。 5. **MyItemDelegate.cpp**: 自定义的...
dhtml gantt所有配置_dhtmlx-gantt相关配置
weixin_39865866的博客
12-21 2961
一：搜索功能上次文章里面没有写，这次提一下吧，其实dhtmlxGantt甘特图里面自带搜索功能的如图所示下面是代码展示：第一部分里面是设置列的，这里只显示需要的列，只需要按照如下添加一个标签，就可展示搜索框，主要实现功能是下面的搜索任务那部分，可直接用gantt.config.columns = [{//初始化列名：“text”，标签：“任务名称 div>“，树：true，宽度：'*'//...
gantt图插件
06-12
ganttdemo
JQuery.Gantt 简单示例
05-22
JQuery.Gantt,甘特图,js,组件，简单demo,可直接网页打开
【JIRA 学习】Gantt - 超好用小众的JIRA甘特图插件
热门推荐
Nicolege678的博客
11-25 2万+
最近比较了一下JIRA市场上的甘特图插件，发现了一款小众的超好用的插件Gantt。相对比老牌的biggant structure，Gantt 使用方法简单，功能齐全，而且还是免费的噢。让我们一起来看看这款插件的试用吧。 一、简介的设置 1、设置界面十分简单。通过项目筛选搭配强大的JQL筛选器可轻松定位到我们需要的甘特图需求集。 2、清晰的项目进度展示。显示了问题类型、概要、起止时间、周期，状态和任务进度。 可支持进度条拖拉定位，可支持任务上下拖拉改变位置。 3、支持以人员维度的资源日历展示
Excel图表——甘特图（Gantt；基于条件格式）
weixin_43957681的博客
01-17 5054
Excel可以通过条件格式，设置出gantt图，并随着开始、结束日期的变换而变化，也可以通过完成度，让已完成和未完成部分通过不同的颜色区分进而显示出进度。
Vue 甘特图 gantt 安装使用（dhtmlx-gantt）
i_Satan的博客
01-30 3549
Vue 甘特图 gantt 安装使用 (gantt-elastic)参考文章@shenjuncaci (dhtmlx)参考文章@秃头的铲屎官 dhtmlx@官方文档 dhtmlx 实操案例 (简易 demo) <template> <div class="container"> <div class="select-wrap"> <el-select v-model="value" placeholder="请选择" @chang
2、Gantt 入门 （vue3 + ts）
beauty_600的博客
05-07 2485
首先把 gantt 官网下载的相关文件放入 resource 文件中。 下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml 在html文件中引入 创建一个gantt components，此框架是vue3 + ts + ant design。 <template> <div ref="ganttRef"></div> </template> <script&gt.
【vue库应用】 - 甘特图 dhtmlx-gantt
star_3344的博客
07-05 4244
甘特图是一种项目管理工具，以直观的方式显示项目的时间轴和任务计划。 dhtmlx-gantt库是一个用于创建交互式和可自定义甘特图的js库。本文对该库进行简单应用，包括安装、引用、初始化及配置
项目管理工具dhtmlxGantt甘特图入门教程（八）：数据加载（三）
励志做最业余的专业博主，控件产品可以私我~
01-12 1631
在场景 2的示例中，开始日期和结束日期将类似于“02-04-2022 - 03-04-2022”。即使您没有指定任务日期的小时-分钟部分（duration_unit = "day"），dhtmlxGantt 也始终将其保存为 JS Date，它在客户端具有小时-分钟-秒-毫秒部分。由于​​​​​​​dhtmlxGantt如何解释和存储任务结束日期的详细信息，结果日期可能具有不期望的值。在此示例中，完成日期（任务的结束日期）指定为4月3日，而任务本身在4月2日结束。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值