普加资源甘特图(PlusRGantt) V3.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);            //正确
	
属性类型描述
readOnly Boolean 是否只读。
visible Boolean 是否显示。
style String 样式。
tableWidth Number 表格区宽度。
width Number 宽度。
height Number 高度。
showTableView Boolean 是否显示任务表格。
showGanttView Boolean 是否显示条形图。
showGridLines Boolean 是否条形图表格线。
timeLines Array 时间线数组。
[
    {date: new Date(2007, 0, 3), text: "时间线"},
    {date: new Date(2007, 0, 5), text: "时间线2", 
        style: "width:2px;background:red;"}
]
rowHeight Number 行高。
allowResize Boolean 是否允许拖拽调整甘特图。
allowCreateBar Boolean 默认false。是否允许拖拽创建条形图。

方法

方法参数类型描述
setStyle(String)
 
设置样式,比如:gantt.setStyle("width:100%;height:400px")。
loadData(Array)
 
加载数据(含节点和任务)。
getData()
 
获取数据(含节点和任务)。
getTasks()
 
获取任务数据(不含节点)。
getNodeTree()
 
返回树形数据。
getNodeList()
 
返回列表数据。
setColumns( Array ) 设置表格列集合。
setTreeColumn( String ) 设置树形节点列。
getNode(nodeUID) 根据节点UID,获取节点。
getTask(taskUID) 根据任务UID,获取任务。
getOwnerNode(task) 根据任务,获取所属节点。
addTask(task, node, index)
task:Object。新任务对象。
node:节点。
index:Number。加入的索引位置。
新增任务。
removeTask(task) 删除任务。
removeTasks(Array) 删除多个任务。
updateTask(task, property, value)
updateTask(task, keyValues)
property:String。任务属性名,如"Start"。
value:Object。属性值。
keyValues:Object。键值对,如{Name:'测试完成', PercentComplete: 0}
更新任务属性。
getSelectedTask()
 
获取选中的任务。
getSelectedTasks()
 
获取选中的任务集合。
isSelectedTask(task)
 
判断是否选中任务。
selectTask(task)
 
选中任务。
deselectTask(task) 取消选中节点。
selectTasks(Array)
 
选中多个任务。
deselectTasks(Array) 取消选中多个任务。
selectAllTasks()
 
选中所有任务。
deselectAllTasks() 取消选中所有任务。
addNodes(nodes, parentNode)
 
加入多个子节点。
getSelected()
 
获取选中的节点。
getSelecteds()
 
获取选中的节点集合。
isSelected(node)
 
判断是否选中节点。
select(node)
 
选中节点。
deselect(node) 取消选中节点。
selects(Array)
 
选中多个节点。
deselects(Array) 取消选中多个节点。
selectAll()
 
选中所有节点。
deselectAll() 取消选中所有节点。
getParentNode(node) 获取父节点对象。
getChildNodes(node) //下一级任务
获取子节点数组。
getAllChildNodes(node) 获取所有子节点数组。
getAncestorNodes(node) 获取父级节点数组。
isAncestor(parentNode, node) 判断两节点之间是否有父子关系。
eachChild(node, fn, scope) 遍历下一级子节点。
cascadeChild(node, fn, scope) 遍历所有子节点。
bubbleParent(node, fn, scope) 遍历父级子节点。
collapseAll ( )
 
折叠所有节点。
expandAll ( )
 
展开所有节点。
collapseLevel( Number )
 
折叠某层级节点。
expandLevel( Number )
 
展开某层级节点。
collapse(task)
 
折叠节点。
expand(task)
 
展开节点。
frozenColumn( start, end ) 锁定列。
unfrozenColumn( ) 取消锁定列。
filter(fn) 根据条件过滤任务。
project.filter(function(task){
    if(task.Duration == 2) return true;
    else return false;
});
clearFilter() 取消过滤任务
setShowTableView( Boolean )
 
设置表格是否显示。
setShowGanttView( Boolean )
 
设置条形图是否显示。
setShowGridLines( Boolean )
 
设置是否显示条形图背景表格线。
setTimeLines( Array )
 
设置项目时间线。
setRowHeight( Number )
 
设置行高。
setTopTimeScale( String ) String:时间刻度。
"year/halfyear/quarter/month/week/day/hour"
设置顶层时间刻度。
setBottomTimeScale( String )
同上 
设置底层时间刻度。(底层必须比顶层要小)
zoomIn( ) 放大时间刻度
zoomOut( ) 缩小时间刻度
scrollIntoView(task)
 
定位显示任务。

事件

通过如下方式监听事件:

	    functon onTaskDblClick(e){
	        var gantt = e.source;
            var task = e.task;
	        //e是事件对象, 具体请看每个事件的"参数类型"
	    }
	    gantt.on('taskdblclick', onTaskDblClick);
	
事件名称事件对象描述
drawitem
{
    source: Object, //甘特图对象
    item: Object,   //条形图,任务对象
    itemBox: Object, //条形图的坐标尺寸
    itemHtml: Stirng//单元格内容HTML
}
	            
绘制条形图时发生。
taskclick
{
    source: Object, //甘特图对象
    task: Object    //任务对象
}    
	            
单击任务时发生。
taskdblclick
{
    source: Object, //甘特图对象
    task: Object    //任务对象
}    
	            
双击任务时发生。
taskdragstart
{
    source: Object,     //甘特图对象    
    task: Object,        //被拖拽的任务
    action: String,     //拖拽方式:start,finish,move,percentcomplete
    dragUpdown: Boolean,  //move的时候,是否允许换行拖拽
    cancel: Boolean     //是否取消操作
}
	            
条形图开始拖拽时发生。
taskdragdrop
{
    source: Object,     //甘特图对象
    task: Object,        //被拖拽的任务
    dropNode: Object,   //目标投放节点
    action: String,     //拖拽方式:start,finish,move,percentcomplete
    cancel: Boolean     //是否取消拖拽操作
}
	            
拖拽行释放时发生。
taskdragcomplete
{
    source: Object,     //甘特图对象
    task: Object,        //被拖拽的任务
    dropNode: Object,   //目标投放节点
    action: String,     //拖拽方式:start,finish,move,percentcomplete
    value: Object       //值
}
	            
拖拽行释放时发生。
taskselect
	            
选中任务时发生。
taskdeselect
	            
取消选中任务时发生。
barcreate
{
    source: Object,     //甘特图对象
    task: Object,       //被拖拽的任务
    node: Object        //目标节点对象
}
	            
拖拽创建bar时发生。

常见问题

自定义条形图外观

开发者可以控制右侧条形图的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;
    }
});

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

任务排程算法

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

示例请参考"任务排程"

多选、查找任务

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

任务编辑面板

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

选中显示任务详细

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