一个好用的web甘特图

2024-04-27 14:19:22

字体：大中小

来源：转载

供稿：网友

一个好用的web甘特图

前些天一直在弄web甘特图，发现网上很多web甘特图框架，但大部分是收费的。偶尔发现了向日葵甘特图感觉不错，特此写下来一方面当做记录，另一方面也为寻找web甘特图的同学们少走一些弯路，双赢嘛~ 向日葵甘特图是纯js编写，相比于其他庞大的甘特图应用，好处不用多说：轻便易于和网页应用嵌套（其他的同学们可以自己体会）。网上提供了一个远程js库和相应API，我们可以方便的进行二次开发。同学们网上一搜即可找到。本甘特图以xml作为数据传输格式，基本格式如下：<Tasks><Task><UID>0</UID> //唯一任务编号<ID>0</ID><Name>住宅建设</Name> //任务名称<OutlineNumber>0</OutlineNumber> //大纲号码<Start>2004-01-01T08:00:00</Start> //开始时间<Finish>2004-07-30T17:00:00</Finish> //结束时间<Summary>1</Summary> //是否摘要<PercentComplete>0</PercentComplete> //完成百分比 <PRedecessorLink> <PredecessorUID>3</PredecessorUID> //前置任务uid<Type>1</Type> //前置任务关系1：完成-完成2：完成-开始3：开始-完成4：开始-开始 </PredecessorLink></Task></Tasks>

每个task代表一个任务，前台甘特图页面数据就是xml格式传递的。

下面介绍甘特图中几个重要的对象。

一。SFData:此对象为甘特数据核心对象，负责创建任务数据、资源数据、链接数据、资源分配数据等。xml数据读取存储到此对象中，然后以sfdata为数据中心。
二。数据适配器：主要包括SFDataProject和SFDataXml两个对象，用于将xml数据导入到SFData中，下面分别介绍。

SFDataProject：支持直接将微软project的xml格式数据作为数据源导入到SFData.
SFDataXml：采用向日葵甘特图指定的XML格式作为数据源的数据适配器对象，这种xml格式是在ms project的xml格式的基础上，进行一些节点的调整以提升Web性能，支持延时加载，并支持按需下载技术；

三。sfdatatask sfdatalink sfdataresource sfdataAssignment等对象，分别对应任务数据、链接数据、资源数据、资源分配数据，这些对象主要对具体的任务、链接、资源、资源分配等进行相关操作。三者具体关系见下图：

四。SFConfig对象：甘特图(SFGantt javaScript API)之中用来对甘特图进行配置的类，配置的方式可以使用Json，也可以通过类的方法进行配置。如下格式：gtConfig.setConfig("SFGantt/taskIdFieldNames","ID"); 可设置第一列值为ＩＤ号，具体用法参见ＡＰＩ

五。SFGantt对象：甘特图对象,本对象是甘特图的主体对象,代表页面上的甘特图实例，你也可以在页面上运行多个甘特图实例可以完成添加功能控件、设置升/降级、设置页面显示等功能。

下面用两个示例分别演示具体用法：

实例一： xml格式操作甘特图（无数据库交互）此甘特图采用Ajax获取数据：

SFAjax.loadXml("test.xml",onGanttLoaded);//通过Ajax模式下载对应的XML文件，并在下载完成之后执行onDataLoaded函数functiononGanttLoaded(doc)//doc参数是一个XML文件DOM对象{vargtConfig=newSFConfig();//初始化一个页面上的配置对象gtConfig.setConfig("SFGantt/container","Div_Gantt");//设置用来显示甘特图的层的IDgtConfig.setConfig("SFGantt/taskIdFieldNames",

上一篇：nodejs学习：师哥自家的twenty博客框架

下一篇：karma作为jQuery单元测试Runner