当前位置:   article > 正文

其他——dhtmlxGantt甘特图API精华总结

其他——dhtmlxGantt甘特图API精华总结

/******获取任务节点部分********/

  1. //获取任务节点
  2. gantt.getTask(14) //index: 13 rendered_type: "task" rendered_parent: 1 所有属性
  3. //返回下一个项目的ID(无论嵌套级别是什么:相同或不同)
  4. gantt.getNext( taskId ); //没有就返回null
  5. gantt.getNextSibling(taskId );//没有就返回null
  6. //返回上一个项目的ID:
  7. gantt.getPrev(tsakId)
  8. //返回上一个同级项目的ID:
  9. gantt.getPrevSibling(tsakId)
  10. //返回父任务的ID:
  11. gantt.getParent(tsakId)
  12. //返回任务栏的HTML元素
  13. gantt.getTaskNode('10');//-><div task_id=​"2" class=​"gantt_task_line" ​…​​>​​…​</div>​
  14. gantt.getTaskRowNode('10');//-><div class=​"gantt_row" task_id=​"2">​…​</div>​
  15. //根据指定条件查找任务
  16. var userTasks = gantt.getTaskBy("user_id", 5);
  17. var userTasks2 = gantt.getTaskBy(function(task){
  18. return task.user_id == 5 || !task.user_id;
  19. });
  20. var userTasks = gantt.getTaskBy(task => task.user_id == 5);
  21. //通过其全局任务索引返回任务
  22. var globalTaskIndex = gantt.getGlobalTaskIndex(19); // -> 10 var task = gantt.getTaskByIndex(10);
  23. //返回指定时间段内发生的任务的集合
  24. var tasks = gantt.getTaskByTime(new Date(2013,3,10),new Date(2013,4,10));
  25. for (var i=0; i<tasks.length; i++){
  26. alert(tasks[i].text);
  27. }
  28. var tasks = gantt.getTaskByTime();//returns all tasks
  29. //返回指定父分支的第一级子任务
  30. gantt.getChildren( taskId)
  31. //返回指定任务的兄弟姐妹(包括自身)
  32. gantt.getSiblings("t_1"); -> //["t_1", "t_2]
  33. // 检查当前是否选择了指定的任务
  34. gantt.isSelectedTask(task.id)
  35. // 检查指定任务是否存在
  36. gantt.isTaskExists(10); // ->true
  37. // 检查指定任务是否当前在甘特图中呈现
  38. gantt.isTaskVisible("t_1"); // ->true
  1. // 返回配置
  2. gantt.getScale() //返回事件的配置事件头单元格宽度70高度12,总的宽度5600。列数80,每格的做边距0,70,140……;单位day
  3. // 获取甘特图中当前加载的任务数
  4. gantt.getTaskCount();
  5. // 获取分支中任务的索引
  6. var taskIndex = gantt.getTaskIndex("t_1"); // -> 0
  7. var globalTaskIndex = gantt.getGlobalTaskIndex("t_1"); // -> 1
  8. //返回任务的类型
  9. var type = gantt.getTaskType(gantt.getTask(12));
  10. //通过左边表格里列的名称返回列的索引
  11. var index = gantt.getColumnIndex("start_date"); // => 1
  12. //根据 taskId 返回所有相关任务以及相关的链接
  13. gantt.getConnectedGroup(18);
  14. //获取所有的ID
  15. gantt.getDatastore("task").fullOrder
  16. //获取所有节点
  17. gantt.getDatastore("task").pull
  18. //返回日期的列索引columnIndexByDate
  19. gantt.columnIndexByDate(new Date(2017, 03, 11)); // ->10
  20. //返回所选任务的ID:
  21. gantt.getSelectedId()
  22. //返回当前选定任务的数组:
  23. gantt.getSelectedTasks();//getLastSelectedTask; isSelectedTask
  24. //检查指定项目是否具有子任务:
  25. gantt.hasChild("p_1"); //-> true
  26. // 获取屏幕上可见的任务数(未折叠的任务):
  27. gantt.getVisibleTaskCount();

/******位置相关可能用到********/

  1. //返回任务的可见高度
  2. var height = gantt.getTaskHeight(); // -> 30
  3. //任务的DOM元素在时间轴区域中的位置和大小
  4. var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end); //=>left,top,height,width
  5. //获取任务的DOM元素在时间轴区域中的最高位置
  6. gantt.getTaskTop('10');
  7. //获取指定日期在图表区域中的相对水平位置 gantt.posFromDate(new Date(2013,02,31)); // -> 0
  8. gantt.posFromDate(new Date(2013,03,1)); // -> 74
  9. gantt.posFromDate(new Date(2013,03,2)); // -> 148
  10. //滚动图表区域以使指定的日期可见
  11. gantt.showDate(new Date()); //shows the current date
  12. // 在甘特图中启用/禁用多任务选择:
  13. gantt.config.multiselect = false;
  14. // 指定在一个或任何级别内是否可以使用多任务选择:
  15. gantt.config.multiselect_one_level = true;
  16. gantt.showDate(new Date()); //shows the current date
  17. //使指定的任务在屏幕上可见
  18. gantt.showTask('10');
  19. //跳转定位
  20. let colIndex = simulationGantt.columnIndexByDate(new Date( task.start_date ));
  21. simulationGantt.scrollTo( (colIndex-5)*col_width, (task.$index-2)*34);
  22. //滚动到位置 scrollTo
  23. //返回滚动位置
  24. var sPos = gantt.getScrollState(); // {x:58,y:180}
  25. var posX = sPos.x; var posY = sPos.y;
  26. //当甘特图滚动到特定点时触发onGanttScroll(数左,数顶部){...} gantt.attachEvent("onGanttScroll", function (left, top){
  27. // any custom logic here
  28. })
  29. //获取图表区域中指定水平位置的日期//参数相当于列的index
  30. gantt.dateFromPos(0);//返回第0列的日期

/******消息弹窗等********/

  1. //消息框
  2. gantt.message({
  3. type:"confirm-warning",
  4. text:"Are you sure you want to do it?",
  5. expire: 1000,//过期时间
  6. });
  7. //模态框
  8. gantt.modalbox({
  9. title: "Close",
  10. type: "alert-warning"
  11. });
  12. //屏幕右上角的红色弹出窗口显示(第一个参数必为false)
  13. gantt.assert( false, task.text);
  14. //调用确认消息框
  15. gantt.confirm({
  16. text: "Continue?",
  17. ok:"Yes", cancel:"No",
  18. callback: function(result){
  19. if(result){
  20. gantt.message("Yes!");
  21. }else{
  22. gantt.message("No...");
  23. }
  24. }
  25. });
  26. //警报框的配置
  27. gantt.alert({ //confirm,message,modalbox
  28. title:"Alert",
  29. type:"alert-error",
  30. text:"You can't do this"
  31. });
  32. gantt.assert( false, task.text);

/******标记标签********/

  1. //在灯箱区域添加标记
  2. gantt.plugins({ marker: true });
  3. gantt.config.task_date = "%Y-%m-%d";
  4. var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
  5. var todayMarker = null;
  6. var startTime = new Date("2020-12-13");
  7. todayMarker = gantt.addMarker({
  8. start_date: startTime,
  9. end_date: simulationGantt.calculateEndDate(new Date("2020-12-13"), task.duration),
  10. css: "gantt-start-line",
  11. text: "开始时间",
  12. });
  13. //删除灯箱区域添加标记
  14. gantt.deleteMarker(todayMarker);
  15. <style>
  16. .gantt-end-line{ background-color: #ffeb3b; color: #fff; }
  17. .gantt-start-line { background-color: #0ca30a; color: #fff; }
  18. </style>

/****** 一些操作 ********/

  1. // 选择指定的任务、从所选任务中删除选择
  2. gantt.selectTask("t_1"); gantt.unselectTask();
  3. // 在网格中排序任务:
  4. gantt.sort("text",true);//排序的列的名称/true-降序排序,false-升序排序。默认情况下为false
  5. // 将任务移到新位置
  6. gantt.moveTask("t_1", 1);
  7. // 打开具有指定ID的分支
  8. gantt.open("p_1");
  9. // 激活指定的插件
  10. gantt.plugins({ quick_info: true, keyboard_navigation: true });
  11. // 更新指定的任务
  12. var taskId = gantt.addTask({
  13. id:10,
  14. text:"Task #10",
  15. start_date:"02-04-2013",
  16. duration:8,
  17. });
  18. gantt.getTask(taskId).text = "Task #13"; //changes task's
  19. data gantt.updateTask(taskId); //renders the updated task
  20. //初始化promise的回调
  21. gantt.Promise(function(resolve, reject) {
  22. setTimeout(function(){ resolve(); }, 5000);
  23. }).then(function(){ alert("Resolved") });
  24. //添加链接
  25. var linkId = gantt.addLink({ id:1, source:1, target:2, type:gantt.config.links.finish_to_start });
  26. //绑定事件【attachEvent(GanttEventName名称,函数处理程序,对象设置);对象设置可以没有】
  27. var myEvent = gantt.attachEvent("onTaskClick", function(id, e) {
  28. alert("You've just clicked an item with id="+id);
  29. }, {id: "my-click", once: true }); //可以指定id,是否只执行一次
  30. //取消绑定的事件
  31. gantt.detachEvent("my-click");
  32. gantt.detachEvent(myEvent);
  33. // 是指定任务不触发内部事件或服务器端调用:silent
  34. //自动排程:需要插件auto_scheduling插件。
  35. gantt.autoSchedule();
  36. //要从特定任务开始重新计算计划,请将任务的id作为参数传递给autoSchedule()方法
  37. gantt.autoSchedule(taskId);
  38. //全屏
  39. gantt.expand();//全屏
  40. gantt.collapse();//退出全屏
  41. //计算完成任务的日期
  42. gantt.calculateEndDate({start_date: new Date(2013,02,15), duration: 48});
  43. gantt.calculateEndDate(new Date(2013,02,15), 48);
  44. //判断是否存在参数,则返回false;否则返回true
  45. if(gantt.defined(task.custom_property)){
  46. // ..
  47. }
  48. //销毁甘特图实
  49. var myGantt = Gantt.getGanttInstance(); myGantt.destructor();
  50. //隐藏灯箱模式叠加层,以阻止与其余屏幕的交互
  51. gantt.hideCover(gantt.getLightbox());
  52. //如果灯箱当前处于活动状态,则将其关闭
  53. gantt.showLightbox(1); gantt.hideLightbox()

/******遍历节点********/

  1. //遍历甘特图中指定任务的所有父任务
  2. gantt.eachParent(function(task){
  3. alert(task.text);
  4. }, taskId);
  5. //遍历甘特图中的所有选定任务 eachSelectedTask
  6. //遍历特定任务或整个甘特图的所有子任务 eachTask
  7. //遍历被选中的节点 eachSelectedTask

/******导入导出:********/

  1. exportToExcel、exportToMSProject、exportToICal、exportToPDF、exportToPNG、exportToJSON
  2. importFromMSProject
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/article/detail/43169
推荐阅读
相关标签
  

闽ICP备14008679号