vue——dhtmlxGantt甘特图API精华总结

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

//获取任务节点
gantt.getTask(14) //index: 13 rendered_type: "task" rendered_parent: 1 所有属性

//返回下一个项目的ID(无论嵌套级别是什么:相同或不同)
gantt.getNext( taskId ); //没有就返回null
gantt.getNextSibling(taskId );//没有就返回null 
//返回上一个项目的ID: 
gantt.getPrev(tsakId) 
//返回上一个同级项目的ID: 
gantt.getPrevSibling(tsakId) 
//返回父任务的ID: 
gantt.getParent(tsakId)

//返回任务栏的HTML元素
gantt.getTaskNode('10');//->
​​…​
​ gantt.getTaskRowNode('10');//->
​…​
​ //根据指定条件查找任务 var userTasks = gantt.getTaskBy("user_id", 5); var userTasks2 = gantt.getTaskBy(function(task){ return task.user_id == 5 || !task.user_id; }); var userTasks = gantt.getTaskBy(task => task.user_id == 5); //通过其全局任务索引返回任务 var globalTaskIndex = gantt.getGlobalTaskIndex(19); // -> 10 var task = gantt.getTaskByIndex(10); //返回指定时间段内发生的任务的集合 var tasks = gantt.getTaskByTime(new Date(2013,3,10),new Date(2013,4,10)); for (var i=0; i //["t_1", "t_2] // 检查当前是否选择了指定的任务 gantt.isSelectedTask(task.id) // 检查指定任务是否存在 gantt.isTaskExists(10); // ->true // 检查指定任务是否当前在甘特图中呈现 gantt.isTaskVisible("t_1"); // ->true
// 返回配置
gantt.getScale() //返回事件的配置事件头单元格宽度70高度12,总的宽度5600。列数80,每格的做边距0,70,140……;单位day

// 获取甘特图中当前加载的任务数
gantt.getTaskCount();

// 获取分支中任务的索引
var taskIndex = gantt.getTaskIndex("t_1"); // -> 0 
var globalTaskIndex = gantt.getGlobalTaskIndex("t_1"); // -> 1

//返回任务的类型
var type = gantt.getTaskType(gantt.getTask(12));

//通过左边表格里列的名称返回列的索引
var index = gantt.getColumnIndex("start_date"); // => 1

//根据 taskId 返回所有相关任务以及相关的链接
gantt.getConnectedGroup(18);

//获取所有的ID
gantt.getDatastore("task").fullOrder

//获取所有节点
gantt.getDatastore("task").pull

//返回日期的列索引columnIndexByDate
gantt.columnIndexByDate(new Date(2017, 03, 11)); // ->10

//返回所选任务的ID:
gantt.getSelectedId()

//返回当前选定任务的数组:
gantt.getSelectedTasks();//getLastSelectedTask; isSelectedTask

//检查指定项目是否具有子任务:
gantt.hasChild("p_1"); //-> true

// 获取屏幕上可见的任务数(未折叠的任务):
gantt.getVisibleTaskCount();

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

//返回任务的可见高度 
var height = gantt.getTaskHeight(); // -> 30 

//任务的DOM元素在时间轴区域中的位置和大小 
var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end); //=>left,top,height,width 

//获取任务的DOM元素在时间轴区域中的最高位置 
gantt.getTaskTop('10'); 

//获取指定日期在图表区域中的相对水平位置 gantt.posFromDate(new Date(2013,02,31)); // -> 0 
gantt.posFromDate(new Date(2013,03,1)); // -> 74 
gantt.posFromDate(new Date(2013,03,2)); // -> 148 

//滚动图表区域以使指定的日期可见 
gantt.showDate(new Date()); //shows the current date 

// 在甘特图中启用/禁用多任务选择: 
gantt.config.multiselect = false; 

// 指定在一个或任何级别内是否可以使用多任务选择: 
gantt.config.multiselect_one_level = true; 
gantt.showDate(new Date()); //shows the current date 

//使指定的任务在屏幕上可见 
gantt.showTask('10'); 

//跳转定位 
let colIndex = simulationGantt.columnIndexByDate(new Date( task.start_date )); 
simulationGantt.scrollTo( (colIndex-5)*col_width, (task.$index-2)*34);

//滚动到位置 scrollTo 
//返回滚动位置
var sPos = gantt.getScrollState(); // {x:58,y:180} 
var posX = sPos.x; var posY = sPos.y; 

//当甘特图滚动到特定点时触发onGanttScroll(数左,数顶部){...} gantt.attachEvent("onGanttScroll", function (left, top){ 
    // any custom logic here 
}) 

//获取图表区域中指定水平位置的日期//参数相当于列的index 
gantt.dateFromPos(0);//返回第0列的日期

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

//消息框 
gantt.message({
  type:"confirm-warning", 
  text:"Are you sure you want to do it?", 
  expire: 1000,//过期时间 
}); 

//模态框 
gantt.modalbox({ 
  title: "Close", 
  type: "alert-warning" 
}); 

//屏幕右上角的红色弹出窗口显示(第一个参数必为false) 
gantt.assert( false, task.text); 
//调用确认消息框 
gantt.confirm({ 
  text: "Continue?", 
  ok:"Yes", cancel:"No", 
  callback: function(result){ 
    if(result){  
      gantt.message("Yes!"); 
    }else{ 
      gantt.message("No..."); 
    } 
  } 
}); 
//警报框的配置 
gantt.alert({ //confirm,message,modalbox 
  title:"Alert", 
  type:"alert-error", 
  text:"You can't do this" 
}); 
gantt.assert( false, task.text);

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

//在灯箱区域添加标记 
gantt.plugins({ marker: true }); 
gantt.config.task_date = "%Y-%m-%d"; 
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); 
var todayMarker = null; 
var startTime = new Date("2020-12-13"); 
todayMarker = gantt.addMarker({ 
  start_date: startTime, 
  end_date: simulationGantt.calculateEndDate(new Date("2020-12-13"), task.duration), 
  css: "gantt-start-line", 
  text: "开始时间", 
}); 

//删除灯箱区域添加标记 
gantt.deleteMarker(todayMarker); 

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

// 选择指定的任务、从所选任务中删除选择
gantt.selectTask("t_1"); gantt.unselectTask();

// 在网格中排序任务:
gantt.sort("text",true);//排序的列的名称/true-降序排序,false-升序排序。默认情况下为false

// 将任务移到新位置
gantt.moveTask("t_1", 1);

// 打开具有指定ID的分支
gantt.open("p_1");

// 激活指定的插件
gantt.plugins({ quick_info: true, keyboard_navigation: true });

// 更新指定的任务
var taskId = gantt.addTask({ 
  id:10, 
  text:"Task #10", 
  start_date:"02-04-2013", 
  duration:8, 
}); 
gantt.getTask(taskId).text = "Task #13"; //changes task's 
data gantt.updateTask(taskId); //renders the updated task

//初始化promise的回调
gantt.Promise(function(resolve, reject) { 
  setTimeout(function(){ resolve(); }, 5000);
 }).then(function(){ alert("Resolved") });

//添加链接
var linkId = gantt.addLink({ id:1, source:1, target:2, type:gantt.config.links.finish_to_start });

//绑定事件【attachEvent(GanttEventName名称,函数处理程序,对象设置);对象设置可以没有】
var myEvent = gantt.attachEvent("onTaskClick", function(id, e) { 
  alert("You've just clicked an item with id="+id); 
}, {id: "my-click", once: true }); //可以指定id,是否只执行一次 
//取消绑定的事件 
gantt.detachEvent("my-click"); 
gantt.detachEvent(myEvent); 

// 是指定任务不触发内部事件或服务器端调用:silent

//自动排程:需要插件auto_scheduling插件。
gantt.autoSchedule();
//要从特定任务开始重新计算计划,请将任务的id作为参数传递给autoSchedule()方法 
gantt.autoSchedule(taskId);

//全屏
gantt.expand();//全屏 
gantt.collapse();//退出全屏

//计算完成任务的日期
gantt.calculateEndDate({start_date: new Date(2013,02,15), duration: 48}); 
gantt.calculateEndDate(new Date(2013,02,15), 48);

//判断是否存在参数,则返回false;否则返回true
if(gantt.defined(task.custom_property)){ 
  // .. 
}

//销毁甘特图实
var myGantt = Gantt.getGanttInstance(); myGantt.destructor();

//隐藏灯箱模式叠加层,以阻止与其余屏幕的交互
gantt.hideCover(gantt.getLightbox());

//如果灯箱当前处于活动状态,则将其关闭
gantt.showLightbox(1); gantt.hideLightbox()

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

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

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

exportToExcel、exportToMSProject、exportToICal、exportToPDF、exportToPNG、exportToJSON
importFromMSProject

你可能感兴趣的:(vue)