纯js甘特图：MZGantt如何启用任务编辑功能？

启用MZGantt甘特图插件任务编辑功能的方法

一. 引用插件（除核心模块外，需要引用编辑模块）

普通JS版本需在HTML中引入以下文件：

<link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />
<script language="javascript" src="../../gantt/mzgantt.js"></script>
<script language="javascript" src="../../gantt/edit.js"></script>

NPM版本通过以下方式导入：

import {MZGantt,MZGanttEditor} from '/node_modules/mzgantt';

二. 配置参数

设置甘特图配置对象，启用编辑状态：

let ganttConfig = {
    ganttStatus: "e" // "e"表示可编辑模式，"r"表示只读模式
}

三. 初始化数据

准备空数组作为初始数据容器：

let data = [];

四. 创建与渲染甘特图

初始化甘特图对象并启动编辑器：

const myGantt = MZGantt.init();
MZGanttEditor.start(myGantt); // 启用编辑功能

myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data); // 绑定DOM容器
myGantt.drawGantt(); // 渲染图表

五. 获取编辑后的数据

通过以下方法获取修改后的任务数据：

let updData = myGantt.getUpdatedRows();

该方法返回的数据结构示例如下：

{
    "operation": "modified",
    "duration": 1,
    "id": 11,
    "name": "任务名称wzf1",
    "resId": "2",
    "pctComp": 20,
    "rsltStart": "2025-07-01",
    "rsltEnd": "2025-09-30",
    "planBarColor": "#C0EBE8",
    "parentId": 1,
    "preNodes": [],
    "seq": 2000,
    "plan": [{
        "start": "2025-07-02",
        "end": "2025-07-06",
        "dur": 10
    }]
}

关键字段说明

• seq：任务行的顺序标识，后端存储时需保留该字段
• operation：标识操作类型（如新增/修改）
• plan：包含任务时间计划的数组

提交数据到后端，并持久化保存！

数据持久化建议

重新加载数据时，按seq字段升序排序后绑定到甘特图，可保持任务顺序一致性。

更多技术信息，请查看MZGantt技术文档。