当前位置: 首页 > Web前端 > HTML

如何在dhtmlxGantt网格中对任务进行排序和重新排序

时间:2023-04-02 18:28:38 HTML

dhtmlxGantt是一个用于跨浏览器和跨平台应用程序的全功能甘特图。最完整的甘特图库,可满足所有项目管理应用程序的需求。它允许您创建动态甘特图并以方便的图形方式可视化项目进度。使用dhtmlxGantt,您可以显示活动之间的依赖关系,使用完成百分比阴影显示当前任务状态,并将活动组织到树结构中。重新排序任务dhtmlxGantt提供了两种在网格中重新排序任务的方法:拖放排序这些方法是备选方法。默认情况下禁用这两种模式。要启用拖放重新排序,请使用order_branch选项:gantt.config.order_branch=true;gantt.init("gantt_here");您可以查看视频指南,了解如何在网格中对任务进行排序和重新排列。在甘特图结构中拖放order_branch选项允许在同一树级别内拖动任务。还可以启用一种模式,该模式可以在整个甘特图中重新排序任务。这意味着一个任务可以在任何树级别替换另一个任务。要使用这种类型的任务重新排序,请使用order_branch_free选项://在整个甘特图中重新排序任务gantt.config.order_branch=true;gantt.config.order_branch_free=true;gantt.init("gantt_here");特定位置要拒绝在特定位置放置任务,请使用onBeforeTaskMove或onBeforeRowDragEnd事件://防止移动到另一个子分支:gantt.attachEvent("onBeforeTaskMove",function(id,parent,tindex){vartask=gantt.getTask(id);if(task.parent!=parent)returnfalse;returntrue;});//organtt.attachEvent("onBeforeRowDragEnd",function(id,parent,tindex){vartask=gantt.getTask(id);if(task.parent!=parent)返回false;返回true;});提高大型数据集的性能如果您的甘特图包含许多任务,分支重新排序的默认模式可能会降低性能。为了加快速度,您可以使用“标记”模式。gantt.config.order_branch="标记";在这种模式下,只有任务名称被重新排序(按住鼠标左键),甘特图只有在任务被放置在目标上(释放键)时才会重新呈现。与默认模式不同,更改任务位置不涉及触发onBeforeTaskMove/onAfterTaskMove事件。要防止任务掉落到特定位置,请改用onBeforeRowDragMove事件(仅适用于“标记”模式)。在拖放过程中突出显示可用的放置位置要在拖动过程中突出显示可用的目标位置(例如,无法将根节点拖动到另一个根目录下,并且您希望直观地告知用户这一点),请使用使用onRowDragStart和onRowDragEnd事件:gantt.config.order_branch=true;//仅在分支内排序任务gantt.init("gantt_here");甘特图分析(demo_tasks);vardrag_id=null;gantt.attachEvent("onRowDragStart",function(id,target,e){drag_id=id;returntrue;});甘特图。attachEvent("onRowDragEnd",function(id,target){drag_id=null;gantt.render();});甘特图。模板.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";}返回””;};