一个好用的web甘特图
来源:互联网 发布:阿里云服务器ecs建站 编辑:程序博客网 时间:2024/05/22 03:07
前些天一直在弄web甘特图,发现网上很多web甘特图框架,但大部分是收费的。偶尔发现了向日葵甘特图 感觉不错,特此写下来一方面当做记录,另一方面也为寻找web甘特图的同学们少走一些弯路,双赢嘛~
以上只是基本操作,我抛砖引玉下,具体读者可参阅API文档和实例程序,网址如下:http://www.51diaodu.cn/sfgantt/examples/index.html
向日葵甘特图是纯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" ); 可设置第一列值为ID号,具体用法参见API
五。SFGantt对象:甘特图对象,本对象是甘特图的主体对象,代表页面上的甘特图实例,你也可以在页面上运行多个甘特图实例 可以完成添加功能控件、设置升/降级、设置页面显示等功能。
下面用两个示例分别演示具体用法:
实例一: xml格式操作甘特图(无数据库交互)
此甘特图采用ajax获取数据:
SFAjax.loadXml( "test.xml" ,onGanttLoaded); //通过Ajax模式下载对应的XML文件,并在下载完成之后执行onDataLoaded函数
function onGanttLoaded(doc) //doc参数是一个XML文件DOM对象
{
var gtConfig=new SFConfig(); //初始化一个页面上的配置对象
gtConfig.setConfig( "SFGantt/container","Div_Gantt" ); //设置用来显示甘特图的层的ID
gtConfig.setConfig( "SFGantt/taskIdFieldNames","ID" ); //设置甘特图编号列显示的字段,缺省为空,这里将其设置为ID
gtData= new SFData(new SFDataProject(doc)); //将doc对象初始化为一个甘特数据对象
gtData.addComponent( new SFDataIDComponent()); //使用向日葵甘特SFDataIDComponent数据插件
gtMap = new SFGantt(gtConfig,gtData); //用相应的数据对象和配置对象创建甘特对象
SFEvent.addListener(gtMap, "linkclick",onLinkdblClick);//任务双击事件
SFGanttField.getTaskField( "Start").setInputHandle(InputHandle_DateTime);//设置开始日期输入方式
SFGanttField.getTaskField( "Finish").setInputHandle(InputHandle_DateTime);//设置结束日期输入方式
gtMap.showMap( null,5); //显示甘特图
}
具体类用法读者们可查阅提供的API文档
实例二:与数据库交互的。
代码如下:
function onLoad()//在页面初始化的时候执行本函数 { //通过servlet获取甘特图所需要的xml数据 SFAjax.loadXml("servlet/dataProvider?uid=" +projectUid+"&action=getRootTask&t="+ new Date().valueOf(),onGanttLoaded); } function onGanttLoaded(doc) //doc参数是一个XML文件DOM对象 { var gtConfig=new SFConfig(); //初始化一个页面上的配置对象 gtConfig.setConfig( "SFGantt/container","Div_Gantt" ); //设置用来显示甘特图的层的ID var adapter=new SFDataXml(doc); //自定扩展一个责任人域,设置一个负责人维护域 Dutier //设置责任人字段,通知适配器adapter从 xml中读取这个属性,这样Task对象会扩展出 Dutier属性, //注意第二个参数的大小写与 xml标签相同 adapter.addTaskProperty( "Dutier","DUTIER" ,SFDataRender.types.String); //第二步:用setTaskField函数来设置责任人甘特属性域,域显示方式 headstyle,bodystyle ,inputstyle可使用样式表,支持更灵活的显示方式 var field1=new SFGanttField({width:100,bodyData:'Dutier' ,inputData:'Dutier',headText: '负责人',headStyle:{textAlign:'left' },bodyStyle: {textAlign:'right'}}) SFGanttField.setTaskField( "Dutier",field1); //修改已有甘特域的显示属性和输入属性 SFGanttField.getTaskField( "OutlineNumber").setHeadText("WBS" );//设置显示方式 SFGanttField.getTaskField( "Start").setInputHandle(InputHandle_DateTime);//设置开始日期输入方式 SFGanttField.getTaskField( "Finish").setInputHandle(InputHandle_DateTime);//设置结束日期输入方式 //设置甘特图显示字段属性 gtConfig.setConfig( "SFGantt/taskFieldNames","StatusIcon,Name,Start,Finish,Duration,Dutier,OutlineNumber" );//设置甘特图显示的字段列表 //初始化甘特图数据对象 gtData= new SFData(adapter); //初始化甘特图日志对象,初始化日志对象后,系统才会记录修改日志,用于向后台发送修改内容。设置记录日志内容 gtLog=new SFDataLogging(gtData); gtLog.setTaskFields( "Name,Start,Finish,Summary,PercentComplete,Dutier,Notes" ) //添加插件 //添加大纲级别插件 gtData.addComponent( new SFDataOutlineComponent()); //使用向日葵甘特SFDataOutlineComponent数据插件 //根据配置和数据产生甘特数据 gtMap= new SFGantt(gtConfig,gtData); //设置甘特图的事件 //增加甘特图事件SFEvent.addListener //第一个参数为 gantt数据 gtData //第二个参数为事件名称 //第三个参数为事件激发时的调用函数 SFEvent.addListener(gtData, "aftertaskadd",onAfterTaskAdd);//添加任务之后调用事件产生唯一顺序号 guid SFEvent.addListener(gtData, "afterlinkadd",onAfterLinkAdd);//添加链接之后调用事件产生唯一顺序号 guid SFEvent.addListener(gtData, "aftertaskchange",onAfterTaskChange);//任务属性赋值事件 SFEvent.addListener(gtMap, "linkclick",onLinkdblClick);//链接线点击事件任务属性赋值事件 //计算所有任务的工期,任务都按照固定工期进行运算。 initDuration(); /*gtMap.addControl(aaa=new SFGanttProgressLine("2009-12-02 18:00:00",{ vertexImg:'http://www.51diaodu.cn/sfgantt/img/task_head_20.gif', vertexSize:[10,10], vertexStyle:{border:'solid 1px green'}, lineColor:'black', lineWeight:1 }));*/ //增加项目进度线 pgl= new SFGanttProgressLine("2004-12-02 18:00:00" ); gtMap.addControl(pgl); //甘特图显示,第一个参数用于甘特图初始化显示时的 左边界,第二个参数用于显示比例 gtMap.showMap(SFGlobal.getDate( "2009-11-18 00:00:00"),4); }function save() { var xmlDom=gtLog.getXml();//获得更新记录的XML文件 var strLog=SFAjax.getXmlString(xmlDom); alert( "发送到后台的更改记录为:\n" +strLog); var params=[]; //在这里计算出此任务的顺序 params.push( "action=save"); params.push( "t="+new Date().valueOf()); params.push( "uid="+projectUid); SFAjax.loadXml("servlet/dataResolver?" +params.join("&"), function(doc) { if(doc.documentElement.getAttribute("errorCode" )=="0") { gtLog.clear(); //如果存盘成功,就重置所有变更信息 alert( "数据保存成功!" ); } else { alert( "?"+params.join("&" )); alert(doc.documentElement.firstChild?doc.documentElement.firstChild.nodeValue:"未知错误"); } }, false,strLog); }
xml与数据库交互如下图所示
与数据库交互的关键是SFDataLogging对象,该对象可监视甘特图页面修改操作,并在保存时向后台发送相关修改命令。后台servlet解析该命令并进行相关操作并保存数据到数据库。
以上只是基本操作,我抛砖引玉下,具体读者可参阅API文档和实例程序,网址如下:http://www.51diaodu.cn/sfgantt/examples/index.html
0 0
- 一个好用的web甘特图
- java web 一个好用的前台分页技术
- 一个关于web控件的好站点
- 一个好的web欣赏网站
- JavaScript真相报告(来自mozilla,兼推荐一个好用的web幻灯片系统)
- web程序员如何快速搭建一个免费又好用的网站
- 发现了一个好用的WEB项目打印控件--四方打印
- 一个学习Web基础知识比较好的网站
- 一个初级WEB应用程序应该有好的三点。
- 一个绝好的Web开发IDE:aptana
- 偶然发现一个web自动化测试的好东东---selenium
- 【好文】成为一个高效的web开发者
- 一个好用的电子地图
- 一个好用的DBGRID
- 一个好用的DBGRID
- 一个好用的套路
- 一个不了解HTTP协议的程序员不是一个好的Web开发者
- 快速配置好一个好用的vim
- HashMap & HashTable
- s3c2416启动方式
- 可持久化线段树 HDU4866 Shooting
- 三次握手
- IP数据报格式和IP地址路由(三)
- 一个好用的web甘特图
- list基本用法程序举例
- ARM存储器的大小端存储方式
- 0x3f3f3f3f...编程中无穷大常量的设置技巧
- 我们正在路上 - 从持续集成到持续发布
- 【软件工程】之软工视频初印象
- 关于codelite 无法debugging 的困境
- ABAP中如何得到一個月的最後一天
- ARM处理器的程序与数据存储(冯·诺依曼与哈佛结构)