dhtmlxgantt jq

### 集成 dhtmlxGantt 和 jQuery 的方法

#### 1. 准备环境
为了成功集成 dhtmlxGantt 和 jQuery，在项目中需引入必要的库文件。这通常涉及下载并链接两个库的相关脚本。

对于 dhtmlxGantt，可以访问官方网站获取最新版本的安装包[^3]。而 jQuery 可以通过 CDN 或者官方页面下载获得。确保在 HTML 文档头部正确引用这些外部资源：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 dhtmlxgantt CSS 文件 -->
<link href="path/to/dhtmlxgantt/codebase/dhtmlxgantt.css" rel="stylesheet">
<!-- 引入 dhtmlxgantt JS 文件 -->
<script src="path/to/dhtmlxgantt/codebase/dhtmlxgantt.js"></script>

#### 2. 初始化 Gantt 图表
初始化 Gantt 图表时，可以通过 jQuery 方法来简化 DOM 操作过程。下面是一个简单的例子展示如何利用 jQuery 创建一个基本的 Gantt 图表容器，并调用 `gantt.init()` 进行初始化:

$(document).ready(function(){
    $("#gantt_here").css({
        "width": '100%',
        "height": '400px'
    });
    
    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.init("gantt_here");
});

此代码片段展示了当文档完全加载完毕后执行的操作：调整指定 ID (`#gantt_here`) 元素大小至全宽高 400 像素；接着设置日期格式参数并通过传入该元素 ID 完成图表实例化。

#### 3. 数据交互与更新
借助于 jQuery 提供的强大 AJAX 功能，能够轻松实现异步请求服务器端数据源并将返回的结果应用于 Gantt 实例上。这里给出一段示范代码说明怎样从 JSON API 获取任务列表并刷新视图中的数据显示：

$.ajax({
    url: "/api/tasks", // 替换成实际接口地址
    method: "GET",
    dataType: "json"
}).done(function(data){
    var tasks = [];
    $.each(data, function(index, item){
        tasks.push({
            id: item.id,
            text: item.name,
            start_date: item.startDate,
            duration: item.duration,
            progress: parseFloat(item.progress),
            parent: item.parentId || null
        });
    });

    gantt.clearAll();
    gantt.parse(tasks, "json");
});

上述代码实现了向特定 URL 发送 GET 请求读取远程服务提供的任务集合，遍历响应体内的每一项记录转换为目标对象数组形式最后传递给 `parse` 方法完成渲染操作[^2]。