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

普加甘特圖(PlusGantt) 開發(fā)文檔

上海普加軟件有限公司

目錄

1. PlusGantt
2. 如何使用？
3. 甘特圖數(shù)據(jù)結(jié)構(gòu)
4. 集成到第三方JS框架(jQuery、Ext等)
5. 語言本地化
6. PlusGantt API參考
7. 常見問題
   • 自定義列
   • 自定義單元格
   • 自定義條形圖
   • 控制單元格可編輯
8. 歷史更新
9. 獲得支持

PlusGantt

PlusGantt（普加甘特圖）是使用Javascript開發(fā)的、基于Web網(wǎng)頁的甘特圖控件。
可廣泛應(yīng)用于項目管理系統(tǒng)、 ERP 系統(tǒng)、MES系統(tǒng)或其它的任務(wù)資源分配相關(guān)領(lǐng)域。

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

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

如何使用？

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

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

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

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

1. 擴展表格列，比如擴展部門、負(fù)責(zé)人、權(quán)重等列。
2. 外觀自定義：單元格、條形圖和任務(wù)提示框等。
3. 其他。如右鍵菜單、時間刻度、條形圖生成、分級加載、語言本地化等處理。

普加甘特圖能很好完成在WEB上顯示甘特圖的功能。
但是如果您需要在WEB上實現(xiàn)一個類似微軟Project功能邏輯的控件，請查看普加項目管理控件PlusProject。

甘特圖數(shù)據(jù)結(jié)構(gòu)

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

[{
    "UID": "1",
    "Name": "項目范圍規(guī)劃",
    "Duration": 8,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-10T00:00:00",
    "PercentComplete": 0,
    "Summary": 1,
    "Critical": 0,
    "Milestone": 0,
    "PredecessorLink": [],
    "ParentTaskUID": -1
},
{
    "UID": "2",
    "Name": "確定項目范圍",
    "Duration": 1,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-01T23:23:59",
    "PercentComplete": 0,
    "Summary": 0,
    "Critical": 0,
    "Milestone": 0,
    "PredecessorLink": [],
    "ParentTaskUID": "1"
},
{
    "UID": "3",
    "Name": "獲得項目所需資金",
    "Duration": 2,
    "Start": "2007-01-02T00:00:00",
    "Finish": "2007-01-03T23:23:59",
    "PercentComplete": 0,
    "Summary": 0,
    "Critical": 0,
    "Milestone": 0,
    "PredecessorLink": [{
        "Type": 1,
        "PredecessorUID": "2" 
    }],
    "ParentTaskUID": "1"
},
...
]

[
    {
        UID: "1",                      //任務(wù)唯一標(biāo)識符
        Name: "項目范圍規(guī)劃",            //任務(wù)名稱
        Duration: 4,                   //工期
        Start: "2007-01-01T00:00:00",   //開始日期
        Finish: "2007-01-04T23:59:59",  //完成日期
        PercentComplete: 14,            //完成百分比
        Summary: 1,                     //摘要任務(wù)
        Critical: 1,                    //關(guān)鍵任務(wù)    
        Milestone: 0,                   //里程碑    
        PredecessorLink: [],            //前置任務(wù)
        children: [
             {
                UID: "2",
                Duration: 4,
                Start: "2007-01-01T08:00:00",                
                Finish: "2007-01-01T12:00:00",
                PercentComplete: 100,
                Summary: 0,
                Critical: 1,
                Name: "確定項目范圍",
                Milestone: 0,
                PredecessorLink: []
            },
            {
                UID: "3",
                Duration: 8,
                Start: "2007-01-01T13:00:00",                
                Finish: "2007-01-02T12:00:00",
                PercentComplete: 0,
                Summary: 0,
                Critical: 1,
                Name: "獲得項目所需資金",
                Milestone: 0,
                PredecessorLink: [          //前置任務(wù)
                    {               
                        PredecessorUID: "2",
                        Type": 1
                    }
                ]
            },
            ....//更多子任務(wù)
        ]
    },
    .... //更多任務(wù)
]

任務(wù)屬性描述如下：

• UID：必須。String。唯一標(biāo)識符。是一個任意的字符串或數(shù)字，確保任務(wù)UID不重復(fù)。
• Name：必須。String。任務(wù)名稱。
• Start：必須。Date。開始日期。
• Finish：必須。Date。完成日期。
• Duration：必須。Number。工期。
• PercentComplete：必須。Number(0~100)。完成百分比。顯示為上下居中的進度條。
• PredecessorLink：Array。前置任務(wù)。
  四種任務(wù)關(guān)系Type：完成-完成(FF) 0，完成-開始(FS) 1，開始-完成(SF) 2，開始-開始(SS) 3。
• Summary：Number(0或1)。摘要任務(wù)。當(dāng)一個任務(wù)下有子任務(wù)的時候，這個任務(wù)就是摘要任務(wù)，當(dāng)Summary為1時，此任務(wù)會兩端黑色箭頭顯示。
• Critical：Number(0或1)。關(guān)鍵任務(wù)。當(dāng)Critical為1時，顯示一個紅色條形圖。
• Milestone：Number(0或1)。里程碑。當(dāng)Milestone為1時，顯示一個菱形圖標(biāo)。

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

首先，對于jQuery, YUI, Prototype.js等框架來說，它們對頁面的操作基于原始Dom元素的。
所以，你可以不用做任何額外的處理，按PlusProject正常的例子，把項目甘特圖對象加入到頁面元素就可以了。

其次，對于ExtJS這樣封裝度很高的框架，可以從Ext對象找到它的dom，然后render加入即可。使用代碼如下：

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

//設(shè)置尺寸為100%自適應(yīng)
gantt.setStyle("width:100%;height:100%");

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

只需要這樣設(shè)置后，PlusProject就能在Ext的布局面板中自動調(diào)整尺寸大小，看上去跟Ext原生的控件一樣了。

語言本地化

如果要顯示他語言界面，只需要引用locale文件夾下資源js文件即可，例如英文資源包使用如下：

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

語言本地化（英語）示例，請查看這里。

PlusGantt ( API )

屬性

屬性可以從對象直接讀取，但是不能進行賦值操作。如果想對屬性進行賦值，必須使用提供的方法。

	    var gantt = new PlusGantt();
	    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 project = e.source;
            var task = e.task;
	        //e是事件對象, 具體請看每個事件的"參數(shù)類型"
	    }
	    gantt.on('taskdblclick', onTaskDblClick);
	

{
    source: Object, //甘特圖對象
    record: Object, //任務(wù)對象
    column: Object, //列對象
    field: String,  //屬性名
    value: Object,  //單元格值
    cellHtml: Stirng//單元格內(nèi)容HTML
}
	            

{
    source: Object, //甘特圖對象
    item: Object,   //條形圖，任務(wù)對象
    itemBox: Object, //條形圖的坐標(biāo)尺寸
    itemHtml: Stirng//單元格內(nèi)容HTML
}
	            

{
    source: Object, //甘特圖對象
    task: Object    //任務(wù)對象
}    
	            

{
    source: Object, //甘特圖對象
    task: Object    //任務(wù)對象
}    
	            

{
    source: Object,     //甘特圖對象
    tasks: Array,       //被拖拽的任務(wù)集合
    targetTask: Object, //目標(biāo)任務(wù)
    action: String,     //投放方式：before,after,append
    cancel: Boolean     //是否取消操作
}
	            

{
    source: Object,     //甘特圖對象    
    record: Object,       //任務(wù)對象
    column: Object, //列對象
    field: String,  //屬性名
    value: Object,  //單元格值
    cancel: Boolean     //是否取消操作
}
	            

{
    source: Object,     //甘特圖對象    
    record: Object,       //任務(wù)對象
    column: Object, //列對象
    field: String,  //屬性名
    value: Object,  //單元格值
    cancel: Boolean     //是否取消操作
}
	            

{
    source: Object,     //甘特圖對象    
    item: Object,       //任務(wù)對象
    action: String,     //拖拽操作：
move, start, finish, percentcomplete
    cancel: Boolean     //是否取消操作
}
	            

{
    source: Object,     //甘特圖對象    
    item: Object,       //任務(wù)對象
    action: String,     //拖拽操作：
move, start, finish, percentcomplete
    value: Object     //拖拽調(diào)節(jié)的值。日期Date或者數(shù)字Number類型。
}
	            

常見問題

自定義列

開發(fā)者可以根據(jù)自己擴展的任務(wù)屬性類型，來創(chuàng)建自己的列。

具體請參考"自定義列示例"。

自定義單元格

通過監(jiān)聽處理"drawcell"事件，可以根據(jù)任務(wù)信息，設(shè)置行、單元格樣式，以及自定義單元格Html內(nèi)容。

gantt.on("drawcell", function (e) {
    var task = e.record, column = e.column, field = e.field;

    //單元格樣式
    if (column.name == "Name") {
        e.cellCls = "mycellcls";
    }

    //行樣式
    if (task.Summary == 1) {
        e.rowCls = "myrowcls";
    }

    ////自定義單元格Html。如果是工期列, 并且工期大與5天, 顯示紅色
    if (field == "Name" && task.Duration > 5) {
        e.cellHtml = '<b style="color:red;">' + task.Name + '</b>';
    }
    if (field == "Name" && task.Duration <= 2) {
        e.cellHtml = '<span style="color:blue;">' + task.Name + '</span>';
    }

    if (task.Duration == 0) {
        e.rowCls = "deletetask";
    }
});

示例請參考"自定義單元格"

自定義條形圖外觀

開發(fā)者可以控制右側(cè)條形圖的HTML外觀，達到任意的條形圖效果：

//1)自定義條形圖外觀顯示
gantt.on("drawitem", function (e) {
    var item = e.item;
    var left = e.itemBox.left,
        top = e.itemBox.top,
        width = e.itemBox.width,
        height = e.itemBox.height;

    if (!item.Summary && !item.Milestone) {
        var percentWidth = width * (item.PercentComplete / 100);

        e.itemHtml = '<div id="' + item._id + '" class="myitem" style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + (height) + 'px;">';
        e.itemHtml += '<div style="width:' + (percentWidth) + 'px;" class="percentcomplete"></div>';
        e.itemHtml += '</div>';

        //e.ItemHtml = '<a  style="left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+(height-2)+'px;" class="myitem">111</a>';
    }
});
//2)自定義條形圖提示信息
gantt.on('itemtooltipneeded', function (e) {
    var task = e.task;
    e.tooltip = "<div>任務(wù)：" + 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)聽表格的"cellbeginedit"事件，可以控制每個行、每個單元格是否可編輯。

//控制單元格是否可編輯
gantt.on("cellbeginedit", function (e) {
    var task = e.record, column = e.column, field = e.field;

    if (task.Summary == 1) {
        e.cancel = true;
    }

    if (field == 'Duration') {
        e.cancel = true;
    }
});

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