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

DHTMLX Gantt正版試用下載

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

1. 整個甘特圖的只讀模式
2. 特定任務的只讀模式

1、整個甘特圖的只讀模式

要將整個甘特圖設置為只讀，請將readonly 選項設置為true。

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

您應該知道只讀模式只會影響用戶可以通過 UI 執行的內置操作。這意味著當整個甘特圖不可編輯時，用戶無法打開燈箱或內聯編輯器，無法垂直或水平拖放任務或調整任務大小。

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

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

要使特定任務/鏈接在只讀甘特圖中可編輯，請將 'editable' 屬性添加到其數據對象并將其設置為true：

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

默認情況下，上述行為綁定到任務/鏈接的“可編輯”屬性。您可以使用editable_property配置選項更改目標屬性：

gantt.config.editable_property = "property_name";

2、特定任務/鏈接的只讀模式

 要將特定任務或鏈接設為只讀，請將“readonly”屬性添加到數據對象并將其設置為 true：

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

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

當任務/鏈接為只讀時，它不會對點擊、雙擊做出反應，也不可拖動或以任何方式編輯。

如果您想為只讀任務顯示燈箱，您可以使用gantt.showLightbox(id)手動調用它：

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

默認情況下，只讀行為綁定到任務/鏈接的“只讀”屬性。但是您可以使用readonly_property配置選項更改目標屬性 ：

gantt.config.readonly_property = "property_name";

3、“editable_property”配置選項的詳細信息

“editable_property”指的是任務數據對象的屬性，而不是燈箱部分或左側網格的列：

{
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:[...]
}
如果要使其可從燈箱設置，則需要將“editable_property”設置為控件映射到的同一屬性：

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

4、基于多個屬性設置事件只讀

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

手動管理它們的可編輯性，例如通過阻止onBeforeLightbox和onBeforeTaskDrag事件
每次加載、添加或更新任務時動態更新“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享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。

慧都2022年終狂歡火熱進行中，全場產品超低價，DHTMLX全系產品享8.8折！了解更多活動詳情，歡迎訪問慧都網咨詢。

甘特圖控件交流群：764148812    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！