免费99精品国产自在现线观看_人妻少妇精品视频区性色_丝袜 屁股 在线 国产_无码视频在线免费观看

項(xiàng)目管理軟件DHTMLX Gantt配置教程:設(shè)置指定列表

這篇文章給大家講解Gantt的指定列表設(shè)置。

DHTMLX Gantt官方最新版免費(fèi)下載試用,歷史版本下載,在線文檔和幫助文件下載-慧都網(wǎng)

1、概述

默認(rèn)情況下,網(wǎng)格包含4列:

  1. 任務(wù)名稱(chēng)
  2. 開(kāi)始日期
  3. 期間
  4. ' ' 列。 一個(gè)特殊的專(zhuān)欄 name="add"顯示“ ”號(hào),允許用戶(hù)為任務(wù)添加子項(xiàng)。參數(shù)是一個(gè)數(shù)組,其中的 columns 每個(gè)對(duì)象表示一個(gè)列。 因此,例如,要在網(wǎng)格中定義 5 列:“任務(wù)”、“開(kāi)始日期”、“結(jié)束日期”、“持有人”、“進(jìn)度”,請(qǐng)指定 columns 參數(shù),如下所示:

gantt.config.columns = [ {name:"text", label:"Task name", tree:true, width:"*" }, {name:"holder", label:"Holder", align:"center" }, {name:"start_date", label:"Start time", align:"center" }, {name:"end_date", label:"End date", align:"center" }, {name:"progress", label:"Progress", align:"center" },]; gantt.init("gantt_here");

其中'text'、'holder'、'start_date'、'end_date'、'progress' 是數(shù)據(jù)屬性的名稱(chēng) 。

2、顯示任務(wù)的結(jié)束日期

當(dāng)任務(wù)數(shù)據(jù)對(duì)象包含“%Y-%m-%d”或“%d-%m-%Y”格式的開(kāi)始和結(jié)束日期(即沒(méi)有小時(shí)-分鐘部分)時(shí),結(jié)果日期為默認(rèn)格式可能具有不期望的值。

3、隱藏某些任務(wù)的“添加”按鈕

防止用戶(hù)將子任務(wù)添加到特定任務(wù)的一種非常簡(jiǎn)單的方法是通過(guò) CSS 隱藏“添加”按鈕。

  • 為每個(gè)任務(wù)行分配一個(gè) CSS 類(lèi) 首先,使用grid_row_class 模板 :

gantt.templates.grid_row_class = function( start, end, task ){ if ( task.$level > 1 ){ return "nested_task" } return ""; };

  • 然后,隱藏此類(lèi)行的“添加”按鈕:

.nested_task .gantt_add{ display: none !important; }

4、寬度

要設(shè)置列的寬度,請(qǐng)使用的屬性寬度:相關(guān)列對(duì)象中

gantt.config.columns = [ {name:"text", label:"Task name", width:"*", tree:true }, {name:"start_date", label:"Start time", width:150 }, {name:"duration", label:"Duration", width:120 }];gantt.init("gantt_here");

最小/最大列寬

min_width /max_width 屬性可用于在調(diào)整大小操作的情況下限制列寬:

gantt.config.columns = [ {name:"text", label:"Task name", width:"*", min_width: 150, max_width:300, tree:true}, {name:"start_date", label:"Start time", width:150 }, {name:"duration", label:"Duration", width:120 }];gantt.init("gantt_here");

調(diào)整大小時(shí)的最小網(wǎng)格寬度

網(wǎng)格可以調(diào)整到的最小寬度是通過(guò) gantt.config.min_grid_column_width 選項(xiàng)定義的:

gantt.config.min_grid_column_width = 1; // the grid can be resized to 1 px

請(qǐng)注意,調(diào)整大小期間網(wǎng)格的最小寬度還取決于“添加”列的最小寬度(默認(rèn)為 44)。 為了能夠?qū)⒕W(wǎng)格調(diào)整為小于 44 像素的值, 指定min_width選項(xiàng): 請(qǐng)?jiān)凇疤砑印绷械膶?duì)象中

{name: "add", label: "", min_width: 1 }

5、數(shù)據(jù)映射和模板

默認(rèn)情況下,DHTMLX Gantt 使用與列名稱(chēng)對(duì)應(yīng)的數(shù)據(jù)屬性填充網(wǎng)格。 例如,如果為列設(shè)置 name:"holder" ,DHTMLX Gantt 將在傳入的 JSON 數(shù)據(jù)中查找此類(lèi)數(shù)據(jù)屬性,如果存在此類(lèi)屬性,則將其加載到列中。

為列數(shù)據(jù)使用模板

如果您想在一個(gè)列中顯示多個(gè)數(shù)據(jù)屬性的混合,您可以為該列使用任何名稱(chēng),但通過(guò) 的模板 屬性 列 參數(shù) 設(shè)置數(shù)據(jù)模板。 例如,您可以為列指定 name:"staff" 并定義一個(gè)模板函數(shù),該函數(shù)將返回 的持有者 和 進(jìn)度數(shù)據(jù)屬性。 要加載到列中。

gantt.config.columns = [ {name:"text", label:"Task name", tree:true, width:"*" }, {name:"start_date", label:"Start time", align: "center" }, {name:"staff", label:"Holder(s)", template:function(obj){ return obj.holder "(" obj.progress ")"} }]; gantt.init("gantt_here");

6、文本對(duì)齊

要設(shè)置列中文本的水平對(duì)齊方式,請(qǐng)使用的align屬性,代碼如下:

gantt.config.columns = [ {name:"text", label:"Task name", tree:true, align:"center"}, {name:"start_date", label:"Start time", align: "center" }, {name:"duration", label:"Duration", align: "center" }]; gantt.init("gantt_here");

DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表,可滿(mǎn)足項(xiàng)目管理控件應(yīng)用程序的所有需求,是最完善的甘特圖圖表庫(kù)。了解更多DHTMLX Gantt相關(guān)內(nèi)容和資訊,歡迎在線咨詢(xún)或者私信我獲取正版試用版及報(bào)價(jià)。


甘特圖控件交流群:764148812 歡迎進(jìn)群交流討論

相關(guān)新聞

聯(lián)系我們
聯(lián)系我們
在線咨詢(xún)
分享本頁(yè)
返回頂部