如果加蝲? 误心{待一?..
如果讉K不了,可以看这? http://bbs.edojs.com/viewthread.php?tid=134
只需要拖拽设|?可以完成一个WEB UI界面的开? 生成可实际应用的代码(目前可以当作界面代码生成?
后箋?x)l做两个重大Ҏ(gu)?1.代码~辑; 2.数据交互. 实现真正意义的web ide开发工?
在javascript框架的历史上, 国内? 只有EdoJS一家做Cq种E度的web可视化设计器效果:
你也可以参与到这个IDE的完善和扩展工作? q个IDE的实C码可以在q里下蝲:
edojs现在有免Ҏ(gu)权活? 以及开攄件库代码:
http://bbs.edojs.com/viewthread.php?tid=59&extra=page%3D1
让?zhn)没有门? 拥有_的资源去了解和用EdoJS!
q参与到EdoJS的不断完善和扩展工作?
我们坚持做了3q? 国h刉? 希望大家能支? 而不是怀疑和谩骂.
我们也能实现基础软g的超U核武器! 而不只是依靠国外的技术输?
另外: Ƣ迎|疑EdoJS的朋? ȝ请EdoJS免费授权, 8?h也可以下载到60个组件代? 可以分析? EdoJS是否是抄袭的产物!
DynamicGantt是基于WEB览器的动态甘特图解决Ҏ(gu)?/p>
软g的web时代Q真正实现web目理pȝ的核心引擎!
DynamicGantt具备如下几大Ҏ(gu)?
EdoJS是一个由中国人开发的、世界的富客户端界面框架解x案?/p>
在各U基q_框架被国外垄断的今天Q?a >EdoJS致力于搭?#8220;中国刉?#8221;的界面基开发^台框Ӟ提供丰富、完善、强大的UIlg库,以及可视化设计器Qؓ(f)WEB开发领域带来一个来自中国的嘹亮声音!
|站:
论坛:
目前提供?00多个在线CZ演示:
http://edojs.com/examples/index.html
完善的教E中心和API文档:
http://edojs.com/tutorial/index.html
http://edojs.com/api/index.html
易度团队更是在此框架基础上开发了世界U的高lg,
易度甘特?
可视化IDE:
http://edojs.com/ide/index.html
文档理?Excel?sh)子表?FileManager文档理?Calendar日历{等.
先给大家看看我做的效果图?
创徏一?a mce_>易度甘特?/a>Q需要有两大对象Q?/p>
1.Edo.project.GanttView Q甘特图昄lg
2.Edo.data.DataProject Q甘特图数据lg
GanttViewlg是一般意义上的易度甘特图lgQ它是一个界面显C组Ӟ是一个左侧树(wi)形Q务,右侧条Ş囄lg?/p>
DataProject是甘特图数据lgQ它提供了甘特图昄和操作逻辑的数据功能,是一个不可见的组件?/p>
两者配合,实现了一个完整的甘特囑ֺ用,
另外Q不得不要说另一个关键的lgQEdo.util.Ajax?/p>
我们的甘特图数据Q往往是以XML或JSON静态方式存攑֜服务端,或者是以数据库方式存放。我们在面昄甘特囄时候,需要从服务端把q些数据提取出来Q生成一个DataProject数据对象Q然后才能由GanttView正确昄出来?/p>
q里QAjax负责在客L(fng)面Q从服务端获取数据提供给甘特图显C和操作Qƈ且在甘特图操作之后,把甘特图数据Ql以XML或JSON数据形式传递到服务端,更新q数据库的功能?/p>
下面通过一个标准的范例Q来说明在页面上Q创Z个易度甘特图应用的全q程Q?/p>
首先Q我们需要在面内引用易度甘特图的css和jsQ?/p>
<!--edogantt css-->
<link href="../scripts/edo/res/css/base.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/core.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/skin.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/product/project/css/project.css" rel="stylesheet" type="text/css" />
<!--edogantt javascript-->
<script src="../scripts/edo/edo.js" type="text/javascript"></script>
注意Q请仔细查css和js的\径是否正?/p>
然后Q我们就可以使用Ajax获取甘特图数据,创徏DataProjectQ创建GanttViewQ最l生成一个WEB甘特囑ֺ用了Q?/p>
var dataProject, project;
Edo.util.Dom.on(window, 'load', function(e){
//创徏易度甘特囄?br /> project = Edo.create({
type: 'ganttview',
width: 700,
height: 400,
render: document.getElementById('example-view')
});
//使用Ajax, 从服务端获取甘特图数据字W串
Edo.util.Ajax.request({
url: '../data/project.xml', //数据源地址: h意\?br /> onSuccess: function(text){
//使用xml字符串创建Edo.data.DataProject数据对象
dataProject = new Edo.data.DataProject(text);
//dataProject讄lganttview对象的data属性即可显C和操作
project.set('data', dataProject);
},
onFail: function(err){
alert("加蝲xml数据p|,错误?"+err);
}
});
});
以上是从服务端加载XML数据格式的范例,如果(zhn)加载的是JSON格式Q参考如下代码:(x)
Edo.util.Ajax.request({
url: '../data/project.txt',
onSuccess: function(text){
//从json创徏Edo.data.DataProject数据对象
var json = Edo.util.Json.decode(text);
dataProject = new Edo.data.DataProject(json.result);
project.set('data', dataProject);
},
onFail: function(err){
alert("加蝲xml数据p|,错误?"+err);
}
});
仅仅是在创徏Edo.data.DataProject时的不同处理?/p>
当创建显C易度甘特图之后Q易度甘特图lg提供了一pd功能操作入口。如点击d?wi)单元格q行~辑Q鼠标拖拽调整右侧条形图区域中Q务的开始日期、完成日期和完成癑ֈ比,以及右键菜单中的“新增、删除、修攏V升U、降U?#8221;{Q务操作功能?/p>
注意Q如果?zhn)创徏昄甘特图之后,未监听处理甘特图的Q何事Ӟ那么d操作后的d状态将不会(x)有Q何改变,一切Q务的操作l果Q全部通过甘特图事Ӟ开攄用户Q由用户监听q处理Q务的操作后状态?/p>
是_(d)易度甘特囑֏是做了显C和操作的功能封装,但是对于操作l果Q不加以q涉Q完全交l用h控制?/p>
比如Q用户在界面~辑修改了某一d的完成日期,q时候会(x)Ȁ发taskchange事gQ用户可以监听处理这个taskchange事gQ得知:(x)是哪个Q 务,什么属性,要改成什么样的倹{用户可以简单的直接讄lQ务(参考甘特图的Q务操作篇Q,也可以经q一pd复杂的数据逻辑计算和处理,从而判断是否可 以修改,修改后,此Q务关联的其他d的日期怎么联动处理{?/p>
甘特图数据处理,完全交给了开发者,使开发者对数据处理Q有?00%的掌控?/p>
www.edogantt.com|站提供了官方的事g监听数据处理CZQ完全参考微软Project的数据操作处理逻辑?/p>