這篇文章給大家講解dhtmlxGantt編輯器的類型。

DhtmlxGantt正版試用下載

1、編輯器類型

內(nèi)聯(lián)編輯器存儲在editor_types配置對象中。

有幾個(gè)預(yù)定義的內(nèi)聯(lián)編輯器：

• 文本編輯器 - 用于編輯文本列，例如任務(wù)名稱
• 數(shù)字編輯器 - 用于編輯數(shù)字列，例如任務(wù)持續(xù)時(shí)間、順序等。
• 日期編輯器 - 用于編輯日期列，例如任務(wù)的開始和結(jié)束日期
• 選擇編輯器 - 用于從列表中選擇一個(gè)選項(xiàng)
• 歷史編輯器 - 用于為當(dāng)前編輯的任務(wù)設(shè)置任務(wù)前任。此編輯器獲取任務(wù)的 WBS 代碼以設(shè)置與前置任務(wù)的連接。

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

2、日期編輯器中的日期限制

從 v6.3 開始，日期內(nèi)聯(lián)編輯器的最小和最大輸入值沒有默認(rèn)限制。

如果您希望時(shí)間刻度上可見的日期限制日期內(nèi)聯(lián)編輯器的最小值和最大值（除非提供自定義最小值/最大值），您可以指定動(dòng)態(tài)最小值/最大值：

const dateEditor = {type: "date", map_to: "start_date", 
    min: function(taskId){
      return gantt.getState().min_date
    },
    max: function( taskId ){
      return gantt.getState().max_date
    }
};

3、包含結(jié)束日期的編輯器

如果您正在使用任務(wù)的包含結(jié)束日期的格式并希望使其與網(wǎng)格中的內(nèi)聯(lián)編輯正常工作，則必須創(chuàng)建一個(gè)特殊的編輯器來編輯任務(wù)的包含結(jié)束日期，如下所示：

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

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

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

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請點(diǎn)這里！