项目管理工具dhtmlxGantt甘特图入门教程(八):数据加载(一)

翻译|使用教程|编辑:秦林|2022-09-30 10:09:27.417|阅读 39 次

概述:这篇文章给大家讲解如何利用 dhtmlxGantt从对象和服务器加载数据。

# 31款JAVA开发必备控件和工具 # 年末狂欢季,DevExpress、Aspose等5000款正版软/控件抄底价来袭 >>

相关链接:

dhtmlxgantt入门教程

这篇文章给大家讲解如何利用dhtmlxGantt从对象和服务器加载数据。

DhtmlxGantt正版试用下载

从对象加载

要从对象加载数据,请使用parse方法:从内联数据源加载

var data = {
  tasks:[
     {id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
     {id:2, text:"Task #1", start_date:"02-04-2020", duration:8, parent:1},
     {id:3, text:"Task #2", start_date:"11-04-2020", duration:8, parent:1}
   ]
};
gantt.init("gantt_here");
gantt.parse(data);
从服务器加载
客户端

要从服务器加载数据,请使用load方法:甘特图.html

gantt.init("gantt_here");
gantt.load("data.json");

load方法将向指定的 url 发送一个 AJAX 请求,并期望以一种受支持的格式响应数据。例如:数据.json

{
  "tasks":[
     {"id":1, "text":"Project #1", "start_date":"01-04-2020", "duration":18},
     {"id":2, "text":"Task #1", "start_date":"02-04-2020","duration":8, "parent":1},
     {"id":3, "text":"Task #2", "start_date":"11-04-2020","duration":8, "parent":1}
  ],
  "links":[
     {"id":1, "source":1, "target":2, "type":"1"},
     {"id":2, "source":2, "target":3, "type":"0"}
  ]
}

格式在方法的第二个参数中指定:“json”、“xml”或“oldxml”。

gantt.load("data.xml", "xml");
服务器端

在服务器上,您可以拥有一个包含数据的静态文件,也可以拥有一个从数据源收集数据并将其写入响应的脚本。服务器端实现取决于您要使用的框架。

例如,在 Node.js 的情况下,我们应该为 URL 添加一个服务器路由,甘特图将在其中发送 AJAX 数据请求。

gantt.load("/data");

它将生成 JSON 格式的相应响应。

app.get("/data", function(req, res){
    db.query("SELECT * FROM gantt_tasks", function(err, rows){
        if (err) console.log(err);
        db.query("SELECT * FROM gantt_links", function(err, links){
            if (err) console.log(err);
            for (var i = 0; i < rows.length; i++){
                rows[i].start_date = rows[i].start_date.format("YYYY-MM-DD");
                rows[i].open = true;
            }
 
            res.send({ tasks:rows, links : links });
        });
    });
});

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎在线咨询或者私信我获取正版试用版及报价。


甘特图控件交流群:764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询,请点这里!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们

客服热线
023-68661681

QQ客服

意见反馈


添加微信获专业服务

TOP
在线客服系统
live chat