How dhtmlxgantt reorders tasks

reluctantly bid farewell 2021-02-23 15:19:02
dhtmlxgantt reorders tasks


dhtmlxGantt It's full-featured for cross browser and cross platform applications Gantt Chart . Meet all the requirements of the project management application , Is the most complete Gantt chart Library . It allows you to create dynamic Gantt charts , And visualize the project progress in a convenient graphical way . With dhtmlxGantt, You can show dependencies between activities , Displays the current task status with a percent complete shadow and organizes activities into a tree structure .

Reorder tasks

dhtmlxGantt Provides two ways to reorder tasks in the grid :

  1. Drag and drop
  2. Sort

These methods are alternative . By default , Both modes are disabled .

To enable drag and drop reordering , Please use order_branch Options :

gantt.config.order_branch = true;
gantt.init("gantt_here");

You can take a look at the video guide , This guide shows how to sort and reorder tasks in the grid .

Drag and drop throughout the Gantt structure

The order_branch Option allows you to drag tasks at the same tree level .

You can also enable the mode that you can reorder tasks across the Gantt Chart . This means that one task can replace another at any tree level . To use this type of task reordering , Please use order_branch_free Options :

// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;

gantt.init("gantt_here");

Refuse to fall to a specific location

To refuse to put a task in a specific place , Please use onBeforeTaskMove or onBeforeRowDragEnd event :

//prevent moving to another sub-branch:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){

var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;

});

//or
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){

var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;

});

Improve the performance of large datasets

If your Gantt chart contains many tasks , The default mode of branch reordering may degrade performance . In order to speed up , You can use “ Mark ” Pattern .

gantt.config.order_branch = "marker";

In this mode , Just reorder the task names ( Hold down the left mouse button ), And only when the task is in the target position ( Release key ) Before rendering the Gantt chart again . Different from the default mode , Changing the task location does not involve triggering onBeforeTaskMove / onAfterTaskMove event .

To prevent the task from falling to a specific location , Please switch to onBeforeRowDragMove event ( Only in “ Mark ” Valid in mode ).

Highlight available drop positions when dragging and dropping

To highlight available target locations during dragging ( for example , It is impossible to drag the root node to another root directory , And you want to visually inform the user of this information ), Please use onRowDragStart and onRowDragEnd event :

gantt.config.order_branch = true;// order tasks only inside a branch
gantt.init("gantt_here");
gantt.parse(demo_tasks);

var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {

drag_id = id;
return true;

});
gantt.attachEvent("onRowDragEnd", function(id, target) {

drag_id = null;
gantt.render();

});

gantt.templates.grid_row_class = function(start, end, task){

if(drag_id && task.id != drag_id){
if(task.$level != gantt.getTask(drag_id).$level)
return "cant-drop";
}
return "";

};

版权声明
本文为[reluctantly bid farewell]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223150722661i.html

  1. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  2. About webpack
  3. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  4. 详解vue静态资源打包中的坑与解决方案
  5. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  6. 字节跳动2021前端技术岗发布+最新内部面试题
  7. Detailed explanation of Vue static resource packaging and Solutions
  8. Understanding TCP, HTTP, socket, socket connection pool
  9. 2008-2021 front end technical post release + latest internal interview questions
  10. 4. Vue基本指令
  11. 4. Vue basic instruction
  12. Java 发起 http 请求
  13. Java initiates HTTP request
  14. 网站由http升级为https图文教程
  15. Upgrade the website from HTTP to HTTPS
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  18. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  19. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  20. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  21. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  22. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  23. react-native版文字跑马灯
  24. React native text running lantern
  25. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  26. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  27. this.byId(SupplierForm).bindElement in SAP UI5
  28. SAP UI5 JavaScript文件的lazy load - 懒加载
  29. this.byId (SupplierForm).bindElement in SAP UI5
  30. Lazy load lazy load of SAP ui5 JavaScript files
  31. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  32. How to connect the ground gas to the micro front end?
  33. How to transform single / micro service application into serverless application
  34. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  35. Seven array methods for JavaScript you need to master in 2021
  36. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  37. Seven array methods for JavaScript you need to master in 2021
  38. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  39. Seven array methods for JavaScript you need to master in 2021
  40. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  41. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  42. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  43. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  44. 前端面试常考题:JS垃圾回收机制
  45. Frequently asked questions in front end interview: JS garbage collection mechanism
  46. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  47. Java之HTTP网络编程(一):TCP/SSL网页下载
  48. HTTP network programming in Java (1): TCP / SSL web page download
  49. Java之HTTP网络编程(一):TCP/SSL网页下载
  50. HTTP network programming in Java (1): TCP / SSL web page download
  51. 使用vite搭建vue项目
  52. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  53. 在 vue 中通过 express 连接数据库
  54. Using vite to build Vue project
  55. Display PDF file in component: Vue pdf
  56. Connecting database through express in Vue
  57. 2021届秋招哈啰出行前端面经(一面)
  58. vue使用sdk进行七牛云上传
  59. Javascript性能优化【内联缓存】 V8引擎特性
  60. Small true wireless smart headset evaluation: put intelligence into the ear