甘特图-dhtmlxGantt

最新推荐文章于 2021-08-20 17:06:20 发布

qwe耿

最新推荐文章于 2021-08-20 17:06:20 发布

阅读量1.7k

点赞数

分类专栏： html/css 文章标签：甘特图

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用甘特图-dhtmlxGantt插入数据保存到数据库中

第一步：

下载dhtmlxGantt，下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/
解压到文件夹dhtmlxGantt

第二步：

项目引入dhtmlxGantt.js和dhtmlxGantt.css
html页面引用

第三步：

在myGantt.html文件中定义一个DIV容器
通过“gant.init(“gantt_here”)”命令来初始化dhtmlxgantt。该方法中的参数为DIV容器的ID

第四步：

创建数据库gantt
创建表gantt_links、gantt_tasks

CREATE TABLE `gantt_links` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `source` int(11) NOT NULL,
  `target` int(11) NOT NULL,
  `type` varchar(1) NOT NULL,
  PRIMARY KEY (`id`)
)
CREATE TABLE `gantt_tasks` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `text` varchar(255) NOT NULL,
  `start_date` datetime NOT NULL,
  `duration` int(11) NOT NULL,
  `progress` float NOT NULL,
  `sortorder` int(11) NOT NULL,
  `parent` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)

第五步：

注意：使用php语言连接数据库处理

创建data.php

<?php
include ('codebase/connector/gantt_connector.php');

$res=mysql_connect("localhost","root","root")or die("连接失败");
mysql_select_db("gantt");

$gantt = new JSONGanttConnector($res);
$gantt->render_links("gantt_links","id","source,target,type");
$gantt->render_table(
    "gantt_tasks",
    "id",
    "start_date,duration,text,progress,sortorder,parent"
);
?>

html页面，设置时间格式，让输出的数据格式与dhtmlxGantt的格式相匹配，调用 load 方法加载数据
更新数据库，需要将甘特图中的数据保存到数据库中，我们需要用到dataProcessor帮助类库

这里写图片描述

第七步：

刷新数据库，数据插入

代码汇总：
index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>如何使用dhtmlxGantt</title>
        <link rel="stylesheet" type="text/css" href="css/dhtmlxgantt.css"/>
        <script src="js/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="gantt_here" style='width:1000px; height:400px;'></div>
        <script type="text/javascript">
            gantt.config.xml_date = "%Y-%m-%d %H:%i";
            gantt.init("gantt_here");
            gantt.load('data.php');
            var dp=new gantt.dataProcessor("data.php");  
            dp.init(gantt);
        </script>
    </body>
</html>

data.php:

<?php
include ('codebase/connector/gantt_connector.php');

$res=mysql_connect("localhost","root","root")or die("连接失败");
mysql_select_db("gantt");

$gantt = new JSONGanttConnector($res);
$gantt->render_links("gantt_links","id","source,target,type");
$gantt->render_table(
    "gantt_tasks",
    "id",
    "start_date,duration,text,progress,sortorder,parent"
);
?>