夫妇交换性3中文字幕A片_欧美喷潮久久久XXXXx_精品人妻大屁股白浆无码_国产特级毛片AAAAAA_无码无套少妇毛多18P_嗯啊开小嫩苞好深啊H服务员_日韩精品人妻系列无码AV东京_手机久草视频分类在线观看_中国videos18高清hd_

普加資源甘特圖(PlusRGantt) V3.0 開發(fā)文檔

上海普加軟件有限公司

目錄

1. PlusRGantt
2. 如何使用？
3. 甘特圖數(shù)據(jù)結構
4. 集成到第三方JS框架(jQuery、Ext等)
5. 語言本地化
6. PlusRGantt API參考
7. 常見問題
   • 自定義條形圖
   • 控制條形圖拖拽
   • 任務排程算法
   • 多選、查找任務
   • 任務編輯面板
   • 選中顯示任務詳細
8. 歷史更新
9. 獲得支持

PlusRGantt

PlusRGantt（普加資源甘特圖）是使用Javascript開發(fā)的、基于Web網頁的甘特圖控件。
資源甘特圖用于生產制造領域, 可以顯示一個生產線或設備的多道工序排布情況，并且可以進行干涉調整, 達到最佳生產效益。

基于WEB網頁顯示，無需安裝任何插件。
顯示為左側任務表格、右側時間軸刻度條形圖的甘特圖界面。
支持分級加載，不一次性加載全部數(shù)據(jù)。這樣可以支持大數(shù)據(jù)量顯示。
支持年/月/日/時/分/秒等不同時間刻度單位。
支持表格列、條形圖外觀、ToolTip提示信息、右鍵菜單等任意自定義。
跨所有瀏覽器顯示，如IE(1.5+)、FireFox、Chrome、Opera、Safari等。
跨任意服務端平臺，如ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails等都可以使用。
語言本地化。包括英語、中文、日文和其他任意的語言。

PlusRGantt只需要您提供一個簡單的數(shù)據(jù)結構，就能在WEB網頁上顯示一個漂亮的甘特圖。
您可以輕松修改它任意部位的外觀，比如單元格、條形圖、提示信息等。

如何使用？

PlusRGantt是一個Javascript控件，運行在WEB瀏覽器中。與服務端平臺和數(shù)據(jù)庫無關。

使用者需要用Ajax從服務端獲取甘特圖數(shù)據(jù)，是一個簡單的樹形結構。

甘特圖數(shù)據(jù)到達頁面后，使用PlusRGantt的loadData方法，加載顯示甘特圖界面。

然后，使用者可以做如下自定義處理：

1. 控制任務條形圖拖拽調整。
2. 外觀自定義：條形圖和任務提示框等。
3. 其他。如右鍵菜單、時間刻度、條形圖生成、分級加載、語言本地化等處理。

資源甘特圖數(shù)據(jù)結構

PlusRGantt數(shù)據(jù)是一個樹形結構的任務數(shù)據(jù)。這里是JSON格式的數(shù)據(jù)。
下一級子任務由"children"屬性體現(xiàn)。
前置任務由"PredecessorLink"屬性體現(xiàn)。

[
    {
        Name: "P1",                             //節(jié)點名稱
        UID: 1,                                 //節(jié)點唯一標識符
        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;"}
]

方法

project.filter(function(task){
    if(task.Duration == 2) return true;
    else return false;
});

同上 

事件

通過如下方式監(jiān)聽事件：

	    functon onTaskDblClick(e){
	        var gantt = e.source;
            var task = e.task;
	        //e是事件對象, 具體請看每個事件的"參數(shù)類型"
	    }
	    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,   //目標投放節(jié)點
    action: String,     //拖拽方式：start,finish,move,percentcomplete
    cancel: Boolean     //是否取消拖拽操作
}
	            

{
    source: Object,     //甘特圖對象
    task: Object,        //被拖拽的任務
    dropNode: Object,   //目標投放節(jié)點
    action: String,     //拖拽方式：start,finish,move,percentcomplete
    value: Object       //值
}
	            

{
    source: Object,     //甘特圖對象
    task: Object,       //被拖拽的任務
    node: Object        //目標節(jié)點對象
}
	            

常見問題

自定義條形圖外觀

開發(fā)者可以控制右側條形圖的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>";
});
 

示例請參考"自定義顯示條形圖"

控制條形圖拖拽操作

通過監(jiān)聽表格的"taskdragstart"和"taskdragdrop"事件，可以控制任務條形圖的各個拖拽細節(jié)。

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;
    }
});

示例請參考"控制單元格可編輯"

任務排程算法

開發(fā)者可以自定義任務排程算法實現(xiàn)，達到精確控制任務排程生產的需要。

示例請參考"任務排程"

多選、查找任務

示例請參考"多選任務條形圖"

任務編輯面板

示例請參考"任務編輯面板"

選中顯示任務詳細

示例請參考"選中顯示任務詳細"