dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
點擊下載dhtmlxGantt試用版
dhtmlxGantt提供了兩個用于編輯內容的選項：
-
在Lightbox編輯表單的幫助下
-
通過使用“網格”區域中的內聯編輯器
內聯編輯使您可以直接在網格中進行任何更改：創建和更新任務，設置任務之間的連接，定義開始和結束日期或修改持續時間-所有這些都通過內置編輯器進行。
要啟用內聯編輯，您需要：
-
指定編輯器配置列表，并使用編輯器對象的map_to屬性將必要的編輯器映射到網格列
var textEditor = {type: "text", map_to: "text"};
var dateEditor = {type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
-
在列配置中，使用editor屬性來定義應在列中使用的編輯器
gantt.config.columns = [
{name: "text", tree: true, width: '*', resize: true, editor: textEditor},
{name: "start_date", align: "center", resize: true, editor: dateEditor},
{name: "duration", align: "center", editor: durationEditor},
{name: "add", width: 44}
];
您可以看一下視頻指南，該指南顯示了如何在網格中實現內聯編輯。
編輯類型
內聯編輯器存儲在editor_types配置對象中。
有幾種預定義的內聯編輯器：
-
文本編輯器-用于編輯文本列，例如任務名稱
-
數字編輯器-用于編輯數字列，例如任務持續時間，訂單等。
-
日期編輯器-用于編輯日期列，例如任務的開始和結束日期
-
選擇編輯器-用于從列表中選擇一個選項
-
前任編輯器-用于為當前編輯的任務設置任務前任。該編輯器獲取任務的WBS代碼以設置與先前任務的連接。
var editors = {
text: {type: "text", map_to: "text"},
start_date: {type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)},
end_date: {type: "date", map_to: "end_date", min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)},
duration: {type: "number", map_to: "duration", min:0, max: 100},
priority: {type:"select", map_to:"priority", options:gantt.serverList("priority")},
predecessors: {type: "predecessor", map_to: "auto"}
};
日期編輯器中的日期限制
從v6.3開始，日期內聯編輯器的最小和最大輸入值沒有默認限制。
如果希望時間刻度上顯示的日期限制日期內聯編輯器的最小值和最大值（除非提供了自定義的最小值/最大值），則可以指定動態最小值/最大值：
const dateEditor = {type: "date", map_to: "start_date",
min: function(taskId){
return gantt.getState().min_date
},
max: function( taskId ){
return gantt.getState().max_date
}
};
結束日期的編輯器
如果將格式用于任務的包含結束日期，并希望通過網格中的內聯編輯使其正確運行，則必須創建一個特殊的編輯器來編輯任務的包含結束日期，如下所示：
// inclusive editor for end dates
// use the default editor, but override the set_value/get_value methods
var dateEditor = gantt.config.editor_types.date;
gantt.config.editor_types.end_date = gantt.mixin({
set_value: function(value, id, column, node){
var correctedValue = gantt.date.add(value, -1, "day");
return dateEditor.set_value.apply(this, [correctedValue, id, column, node]);
},
get_value: function(id, column, node) {
var selectedValue = dateEditor.get_value.apply(this, [id, column, node]);
return gantt.date.add(selectedValue, 1, "day");
},
}, dateEditor);
var textEditor = {type: "text", map_to: "text"};
var startDateEditor = {type: "date", map_to: "start_date"};
var endDateEditor = {type: "end_date", map_to: "end_date"};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, editor: textEditor,
resize: true},
{name: "duration", label: "Duration", width:80, align: "center",
editor: durationEditor, resize: true},
{name: "start_date", label: "Start", width:140, align: "center",
editor: startDateEditor, resize: true},
{name: "end_date", label: "Finish", width:140, align: "center",
editor: endDateEditor, resize: true}
];
// change lightbox and grid templates to display dates of tasks in an inclusive format
gantt.templates.task_end_date = function(date){
return gantt.templates.task_date(new Date(date.valueOf() - 1));
};
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
if(column === "end_date"){
return gridDateToStr(new Date(date.valueOf() - 1));
}else{
return gridDateToStr(date);
}
}
格式化前置編輯器的值
從v6.3開始，Gantt允許直接從內聯編輯器中指定鏈接的類型以及滯后/超前值。
為此，您需要使用鏈接格式化程序模塊，并將LinksFormatter的一個實例提供到先前的編輯器中：
var formatter = gantt.ext.formatters.durationFormatter({
enter: "day",
store: "day",
format: "auto"
});
var linksFormatter = gantt.ext.formatters.linkFormatter({durationFormatter: formatter});
var editors = {
text: {type: "text", map_to: "text"},
start_date: {type: "date", map_to: "start_date",
min: new Date(2018, 0, 1), max: new Date(2019, 0, 1)},
end_date: {type: "date", map_to: "end_date",
min: new Date(2018, 0, 1), max: new Date(2019, 0, 1)},
duration: {type: "duration", map_to: "duration",
min:0, max: 100, formatter: formatter},
priority: {type: "select", map_to: "priority",
options:gantt.serverList("priority")},
predecessors: {type: "predecessor", map_to: "auto", formatter: linksFormatter}
};
gantt.config.columns = [
{name: "wbs", label: "#", width: 60, align: "center", template: gantt.getWBSCode},
{name: "text", label: "Name", tree: true, width: 200, editor: editors.text,
resize: true},
{name: "start_date", label: "Start", width:80, align: "center",
editor: editors.start_date, resize: true},
{name: "predecessors", label: "Predecessors",width:80, align: "left",
editor: editors.predecessors, resize: true, template: function(task){
var links = task.$target;
var labels = [];
for(var i = 0; i < links.length; i++){
var link = gantt.getLink(links[i]);
labels.push(linksFormatter.format(link));
}
return labels.join(", ")
}},
{name:"add"}
];
自定義內聯編輯器
您還可以指定自定義內聯編輯器。為此，您需要通過以下方式創建一個新的編輯器對象：
gantt.config.editor_types.custom_editor = {
show: function (id, column, config, placeholder) {
// called when input is displayed, put html markup of the editor into placeholder
// and initialize your editor if needed:
var html = "<div><input type='text' name='" + column.name + "'></div>";
placeholder.innerHTML = html;
},
hide: function () {
// called when input is hidden
// destroy any complex editors or detach event listeners from here
},
set_value: function (value, id, column, node) {
// set input value
},
get_value: function (id, column, node) {
// return input value
},
is_changed: function (value, id, column, node) {
//called before save/close. Return true if new value differs from the original one
//returning true will trigger saving changes, returning false will skip saving
},
is_valid: function (value, id, column, node) {
// validate, changes will be discarded if the method returns false
return true/false;
},
save: function (id, column, node) {
// only for inputs with map_to:auto. complex save behavior goes here
},
focus: function (node) {
}
}
為了實現可重用的編輯器，需要記住一些關鍵點：
-
通常，get_value不修改任務對象。該方法僅返回內聯編輯器的當前值。如果該值被認為是有效的，甘特將使用該值自動更新相關任務。
-
使用map_to編輯器的配置選項可以指定任務的哪個屬性應由編輯器更新，但不要將其硬編碼到編輯器中。通過這種方式，您可以將編輯器重用于不同的列。
-
除非您使用復雜的javascript小部件，否則無需在hide函數中指定任何邏輯，因此可以將其保留為空。否則，使用此方法調用析構函數或清理顯示編輯器時附加的任何事件處理程序。
-
確保實現is_changed和is_valid功能：
-
如果is_changed始終返回true，則每次關閉編輯器時，編輯器都會觸發更新（可以發送到后端）。僅當輸入值與初始狀態相比實際發生更改時，此方法才應返回true；否則，該方法應返回true。
-
is_valid 用于防止輸入無效值。
-
如果您要實現的編輯器比將值寫入任務的屬性要復雜的多（例如內置的前身編輯器就是一個很好的例子），則需要在save函數中實現所需的邏輯并指定map_to選項輸入到“ auto”。在這種情況下，甘特圖不會修改任務對象，而是save在需要將所做的更改應用于編輯器時調用該函數。
這是一個簡單數字輸入的實現示例。請注意，該hide方法可以是空函數，并且save可以完全跳過該方法。
var getInput = function(node){
return node.querySelector("input");
};
gantt.config.editor_types.simpleNumber = {
show: function (id, column, config, placeholder) {
var min = config.min || 0,
max = config.max || 100;
var html = "<div><input type='number' min='" + min +
"' max='" + max + "' name='" + column.name + "'></div>";
placeholder.innerHTML = html;
},
hide: function () {
// can be empty since we don't have anything to clean up after the editor
// is detached
},
set_value: function (value, id, column, node) {
getInput(node).value = value;
},
get_value: function (id, column, node) {
return getInput(node).value || 0;
},
is_changed: function (value, id, column, node) {
var currentValue = this.get_value(id, column, node);
return Number(value) !== Number(currentValue);
},
is_valid: function (value, id, column, node) {
return !isNaN(parseInt(value, 10));
},
focus: function (node) {
var input = getInput(node);
if (!input) {
return;
}
if (input.focus) {
input.focus();
}
if (input.select) {
input.select();
}
}
};
之后，您可以使用與內置編輯器相同的方式來使用編輯器：
var numberEditor = {type: "simpleNumber", map_to: "quantity", min:0, max: 50};
gantt.config.columns = [
...
{name: "quantity", label: "Quantity", width: 80, editor: numberEditor,
resize: true},
...
];
請注意，hide在這種情況下，我們不需要實現該方法，因為甘特圖會自動分離編輯器的DOM元素，并且在關閉編輯器后無需清理其他內容。
編輯器
hide如果您在內聯編輯器中使用復雜的小部件，則可能需要添加邏輯。
例如，讓我們考慮以下使用jQuery的DatePicker輸入的實現。在這種情況下，我們需要在將日期選擇器小部件與DOM分離后銷毀它。
先決條件：
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
編輯：
gantt.config.editor_types.custom_datepicker_editor = {
show: function (id, column, config, placeholder) {
placeholder.innerHTML = "<div><input type='text' id='datepicker' name='" +
column.name + "'></div>";
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateStr){
gantt.ext.inlineEditors.save()
}
});
},
hide: function (node) {
$("#datepicker").datepicker( "destroy" );
},
set_value: function (value, id, column, node) {
$("#datepicker").datepicker("setDate", value);
},
get_value: function (id, column, node) {
return $("#datepicker").datepicker( "getDate" );
},
is_changed: function (value, id, column, node) {
return (+$("#datepicker").datepicker( "getDate" ) !== +value);
},
is_valid: function (value, id, column, node) {
return !(isNaN(+$("#datepicker").datepicker( "getDate" )))
},
save: function (id, column, node) {
},
focus: function (node) {
}
};
let dateEditor = {
type: "custom_datepicker_editor",
map_to: "start_date"
};
gantt.config.columns = [
{name: "text", tree: true, width: '*', resize: true},
{name: "start_date", align: "center", resize: true, editor: dateEditor},
{name: "duration", align: "center"},
{name: "add", width: 44}
];
editor.save
save僅當您的編輯器需要一次修改任務的多個屬性，或者希望它修改不同于任務的對象時，才需要使用該功能。
在這種情況下，您可以保留適當的實現以get_value進行內置驗證，但是gantt本身不會嘗試將編輯器的值應用于任務，save而是將調用該函數。
之后save被調用時，你需要解釋的輸入值，并應用變為帶有自定義代碼甘特。方法完成后，Gantt將調用onSave事件save，但不會為修改后的行調用gantt.updateTask。
筆記！save僅當您map_to:"auto"在編輯器的配置中指定時，才會調用該方法：
var editors = {
...
predecessors: {type: "predecessor", map_to: "auto"}
};
內置的前身編輯器就是此類控件的一個很好的例子。您可以在相關示例中找到其簡化的實現。
關產品推薦：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務和時間的分配管理的甘特圖
APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
14次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線