DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的大部分開發(fā)需求，具備完善的甘特圖圖表庫，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發(fā)需求。本文給大家講解DHTMLX Gantt的任務(wù)內(nèi)容如何顯示，歡迎大家下載最新版試用體驗(yàn)。

DHTMLX Gantt正版試用下載

在這一部分中，我們要考慮兩種情況下的只讀模式：

1. 整個(gè)甘特圖的只讀模式
2. 特定任務(wù)的只讀模式

1、整個(gè)甘特圖的只讀模式

要將整個(gè)甘特圖設(shè)置為只讀，請(qǐng)將readonly 選項(xiàng)設(shè)置為true。

gantt.config.readonly = true;
 
gantt.init("gantt_here");

您應(yīng)該知道只讀模式只會(huì)影響用戶可以通過 UI 執(zhí)行的內(nèi)置操作。這意味著當(dāng)整個(gè)甘特圖不可編輯時(shí)，用戶無法打開燈箱或內(nèi)聯(lián)編輯器，無法垂直或水平拖放任務(wù)或調(diào)整任務(wù)大小。

但是readonly屬性不會(huì)阻止通過 API 方法實(shí)現(xiàn)的操作。因此，如果你使用Gantt API，你需要在回調(diào)函數(shù)中手動(dòng)檢查是否啟用了只讀模式。例如，以下是如何阻止通過單擊自定義按鈕添加任務(wù)的功能：

gantt.config.readonly = true;

gantt.config.columns = [
{ name: "text", label: "Task name", width: "*", tree: true },
{ name: "start_date", label: "Start time", align: "center" },
{ name: "duration", label: "Duration", align: "center" },
{ name: "add", label: "1", width: 44 },
{
name: "add_custom", label: "2", width: 44, template: function (task) {
return "<div class='custom_add' onclick='customAdd(" + task.id + ")';></div>"
}
}
];

function customAdd(parentId) {
if (gantt.config.readonly){
return;
}
}

要使特定任務(wù)/鏈接在只讀甘特圖中可編輯，請(qǐng)將 'editable' 屬性添加到其數(shù)據(jù)對(duì)象并將其設(shè)置為true：

gantt.config.readonly = true;
var task = gantt.getTask(id).editable = true;

默認(rèn)情況下，上述行為綁定到任務(wù)/鏈接的“可編輯”屬性。您可以使用editable_property配置選項(xiàng)更改目標(biāo)屬性：

gantt.config.editable_property = "property_name";

2、特定任務(wù)/鏈接的只讀模式

 要將特定任務(wù)或鏈接設(shè)為只讀，請(qǐng)將“readonly”屬性添加到數(shù)據(jù)對(duì)象并將其設(shè)置為 true：

gantt.getTask(id).readonly = true;
gantt.getLink(id).readonly = true;

默認(rèn)情況下，甘特圖會(huì)檢查任務(wù)/鏈接是否具有此屬性且值為非負(fù)值，然后將任務(wù)/鏈接設(shè)置為只讀。否則 - 保持可編輯。

當(dāng)任務(wù)/鏈接為只讀時(shí)，它不會(huì)對(duì)點(diǎn)擊、雙擊做出反應(yīng)，也不可拖動(dòng)或以任何方式編輯。

如果您想為只讀任務(wù)顯示燈箱，您可以使用gantt.showLightbox(id)手動(dòng)調(diào)用它：

gantt.attachEvent("onTaskDblClick", function(id,e){
gantt.showLightbox(id)
return true;
});

默認(rèn)情況下，只讀行為綁定到任務(wù)/鏈接的“只讀”屬性。但是您可以使用readonly_property配置選項(xiàng)更改目標(biāo)屬性 ：

gantt.config.readonly_property = "property_name";

3、“editable_property”配置選項(xiàng)的詳細(xì)信息

“editable_property”指的是任務(wù)數(shù)據(jù)對(duì)象的屬性，而不是燈箱部分或左側(cè)網(wǎng)格的列：

{
tasks:[
{id:1, text:"Project #2", start_date:"01-04-2020", duration:18,order:10,
progress:0.4, parent:0, editable:false},
{id:2, text:"Task #1", start_date:"02-04-2020", duration:8, order:10,
progress:0.6, parent:1, editable:true},
{id:3, text:"Task #2", start_date:"11-04-2020", duration:8, order:20,
progress:0.6, parent:1, editable:true}
],
links:[...]
}
如果要使其可從燈箱設(shè)置，則需要將“editable_property”設(shè)置為控件映射到的同一屬性：

gantt.config.lightbox.sections = [
{
name:"description",
height:38,
map_to:"some_property",
type:"textarea",
focus:true
},
....
]
gantt.config.editable_property = "some_property";

4、基于多個(gè)屬性設(shè)置事件只讀

如果您想根據(jù)一組屬性使事件有條件地可編輯，您可以：

手動(dòng)管理它們的可編輯性，例如通過阻止onBeforeLightbox和onBeforeTaskDrag事件
每次加載、添加或更新任務(wù)時(shí)動(dòng)態(tài)更新“editable_property”（onTaskLoading、onTaskCreated、onAfterTaskUpdate）：
gantt.attachEvent("onTaskLoading", function(task){

gantt.attachEvent("onTaskLoading", function(task){
task.editable = task.has_owner && task.editable && task.text;
return true;
});

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。

 慧都2022年終狂歡火熱進(jìn)行中，全場產(chǎn)品超低價(jià)，DHTMLX全系產(chǎn)品享8.8折！了解更多活動(dòng)詳情，歡迎訪問慧都網(wǎng)咨詢。

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

慧都年終狂歡季，全場產(chǎn)品，限時(shí)特惠，立即了解詳情！