普加资源甘特图(PlusRGantt) V1.0 开发文档

上海普加软件有限公司

目录

1. PlusRGantt
2. 如何使用？
3. 甘特图数据结构
4. 集成到第三方JS框架(jQuery、Ext等)
5. 语言本地化
6. PlusRGantt API参考
7. 常见问题
   • 自定义条形图
   • 控制条形图拖拽
   • 任务排程算法
   • 多选、查找任务
   • 任务编辑面板
   • 选中显示任务详细
8. 历史更新
9. 获得支持

PlusRGantt

PlusRGantt（普加资源甘特图）是使用Javascript开发的、基于Web网页的甘特图控件。
资源甘特图用于生产制造领域, 可以显示一个生产线或设备的多道工序排布情况，并且可以进行干涉调整, 达到最佳生产效益。

基于WEB网页显示，无需安装任何插件。
显示为左侧任务表格、右侧时间轴刻度条形图的甘特图界面。
支持分级加载，不一次性加载全部数据。这样可以支持大数据量显示。
支持年/月/日/时/分/秒等不同时间刻度单位。
支持表格列、条形图外观、ToolTip提示信息、右键菜单等任意自定义。
跨所有浏览器显示，如IE(1.5+)、FireFox、Chrome、Opera、Safari等。
跨任意服务端平台，如ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails等都可以使用。
语言本地化。包括英语、中文、日文和其他任意的语言。

PlusRGantt只需要您提供一个简单的数据结构，就能在WEB网页上显示一个漂亮的甘特图。
您可以轻松修改它任意部位的外观，比如单元格、条形图、提示信息等。

如何使用？

PlusRGantt是一个Javascript控件，运行在WEB浏览器中。与服务端平台和数据库无关。

使用者需要用Ajax从服务端获取甘特图数据，是一个简单的树形结构。

甘特图数据到达页面后，使用PlusRGantt的loadData方法，加载显示甘特图界面。

然后，使用者可以做如下自定义处理：

1. 控制任务条形图拖拽调整。
2. 外观自定义：条形图和任务提示框等。
3. 其他。如右键菜单、时间刻度、条形图生成、分级加载、语言本地化等处理。

资源甘特图数据结构

PlusRGantt数据是一个树形结构的任务数据。这里是JSON格式的数据。
下一级子任务由"children"属性体现。
前置任务由"PredecessorLink"属性体现。

[
    {
        Name: "P1",                             //节点名称
        UID: 1,                                 //节点唯一标识符
        Tasks: [
            {   
                Name: "task1",                  //任务名称
                UID: "p1",                      //任务唯一标识符
                Start: "2007-01-03T00:00:00",   //开始日期
                Finish: "2007-01-03T23:59:59",  //完成日期
                PercentComplete: 0,             //进度
                Duration: 1*24*3600             //工期。单位"秒"
            },
            ......            
        ]
    },
    ......
]

集成到第三方JS框架(jQuery、Ext等)

首先，对于jQuery, YUI, Prototype.js等框架来说，它们对页面的操作基于原始Dom元素的。
所以，你可以不用做任何额外的处理，按PlusProject正常的例子，把项目甘特图对象加入到页面元素就可以了。

其次，对于ExtJS这样封装度很高的框架，可以从Ext对象找到它的dom，然后render加入即可。使用代码如下：

//获取ext控件对象
var extControl = Ext.get(id);

//设置尺寸为100%自适应
gantt.setStyle("width:100%;height:100%");

//把project加入到ext控件对象的dom属性中
gantt.render(extControl.dom);

只需要这样设置后，PlusProject就能在Ext的布局面板中自动调整尺寸大小，看上去跟Ext原生的控件一样了。

语言本地化

如果要显示他语言界面，只需要引用locale文件夹下资源js文件即可，例如英文资源包使用如下：

<script src="../scripts/miniui/locale/en_US.js" type="text/javascript"></script>

语言本地化（英语）示例，请查看这里。

PlusRGantt ( API )

属性

属性可以从对象直接读取，但是不能进行赋值操作。如果想对属性进行赋值，必须使用提供的方法。

	    var gantt = new PlusRGantt();
	    var visible= gantt.visible;         //正确
	    gantt.visible= true;           //错误!!!
	    gantt.setVisible(true);            //正确
	

[
    {date: new Date(2007, 0, 3), text: "时间线"},
    {date: new Date(2007, 0, 5), text: "时间线2", 
        style: "width:2px;background:red;"}
]

方法

同上 

事件

通过如下方式监听事件：

	    functon onTaskDblClick(e){
	        var gantt = e.source;
            var task = e.task;
	        //e是事件对象, 具体请看每个事件的"参数类型"
	    }
	    gantt.on('taskdblclick', onTaskDblClick);
	

{
    source: Object, //甘特图对象
    item: Object,   //条形图，任务对象
    itemBox: Object, //条形图的坐标尺寸
    itemHtml: Stirng//单元格内容HTML
}
	            

{
    source: Object, //甘特图对象
    task: Object    //任务对象
}    
	            

{
    source: Object, //甘特图对象
    task: Object    //任务对象
}    
	            

{
    source: Object,     //甘特图对象    
    task: Object,        //被拖拽的任务
    action: String,     //拖拽方式：start,finish,move,percentcomplete
    dragUpdown: Boolean,  //move的时候，是否允许换行拖拽
    cancel: Boolean     //是否取消操作
}
	            

{
    source: Object,     //甘特图对象
    task: Object,        //被拖拽的任务
    dropNode: Object,   //目标投放节点
    action: String,     //拖拽方式：start,finish,move,percentcomplete
    cancel: Boolean     //是否取消拖拽操作
}
	            

{
    source: Object,     //甘特图对象
    task: Object,        //被拖拽的任务
    dropNode: Object,   //目标投放节点
    action: String,     //拖拽方式：start,finish,move,percentcomplete
    value: Object       //值
}
	            

常见问题

自定义条形图外观

开发者可以控制右侧条形图的HTML外观，达到任意的条形图效果：

//1)自定义条形图外观显示
gantt.on("drawitem", function (e) {
    var item = e.item, node = gantt.getOwnerNode(item);

    var cls = "myitem";
    if (node.Name == "P2" || node.Name == "D1") {
        cls = "myitem2";
    }

    e.itemCls = cls;
});
//2)自定义条形图提示信息
gantt.on('itemtooltipneeded', function (e) {
    var task = e.task;
    e.tooltip = "<div>任务：" + task.Name + "</div>"
    //                +   "<div ><div style='float:left;'>进度：<b>"+task.PercentComplete + "%</b></div>"
    //                +   "<div style='float:right;'>工期："+task.Duration + "日</div></div>"
                + "<div style='clear:both;'>开始日期：" + mini.formatDate(task.Start, 'yyyy-MM-dd') + "</div>"
                + "<div>完成日期：" + mini.formatDate(task.Finish, 'yyyy-MM-dd') + "</div>";
});
 

示例请参考"自定义显示条形图"

控制条形图拖拽操作

通过监听表格的"taskdragstart"和"taskdragdrop"事件，可以控制任务条形图的各个拖拽细节。

gantt.on("taskdragstart", function (e) {
    var action = e.action;  //move, start, finish, percentcomplete
    var task = e.task, node = gantt.getOwnerNode(e.task);

    //进度100%的任务不允许拖拽
    if (task.PercentComplete == 100) {
        e.cancel = true;
    }

    //P2的所有任务，只允许调整进度拖拽。 
    if (node.Name == "P2") {
        if (action != "percentcomplete") {
            e.cancel = true;
        }
    }

    //P1的所有任务不允许跨行拖拽。     
    if (node.Name != "P1") {
        e.dragUpdown = true;
    }
});
gantt.on("taskdragdrop", function (e) {
    var task = e.task,
        node = gantt.getOwnerNode(e.task),
        dropNode = e.dropNode;

    if (dropNode && dropNode.Name == "P3") {
        e.cancel = true;
    }
});

示例请参考"控制单元格可编辑"

任务排程算法

开发者可以自定义任务排程算法实现，达到精确控制任务排程生产的需要。

示例请参考"任务排程"

多选、查找任务

示例请参考"多选任务条形图"

任务编辑面板

示例请参考"任务编辑面板"

选中显示任务详细

示例请参考"选中显示任务详细"