1、编辑器类型
内联编辑器存储在editor_types配置对象中。
有几个预定义的内联编辑器:
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 开始,日期内联编辑器的最小和最大输入值没有默认限制。
如果您希望时间刻度上可见的日期限制日期内联编辑器的最小值和最大值(除非提供自定义最小值/最大值),您可以指定动态最小值/最大值:
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、包含结束日期的编辑器
如果您正在使用任务的包含结束日期的格式并希望使其与网格中的内联编辑正常工作,则必须创建一个特殊的编辑器来编辑任务的包含结束日期,如下所示:
// 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相关内容和资讯,欢迎评论区留言互动,我们一起沟通交流!