甘特图-dhtmlxGantt
程序员文章站
2024-01-20 18:48:46
...
利用甘特图-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"
);
?>It’s over~
学习笔记
转自：http://blog.csdn.net/honantic/article/details/51314672
上一篇： Mysql设置索引的注意事项