这篇文章给大家讲解利用dhtmlxgantt导入/导出Excel到iCal的操作方法。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足应用程序的所有需求,是完善的甘特图图表库
DhtmlxGantt正版试用下载(qun;765665608)https://www.evget.com/product/4213/download
dhtmlxGantt库可以让您以Excel和iCal格式从甘特图中导出数据。您还可以将数据从 Excel文件导入甘特图。
1、导出到 Excel
要将甘特图中的数据导出到Excel文档,请执行以下操作:
使用可选属性调用导出方法
gantt.exportToExcel({ name:"document.xlsx", columns:[ { id:"text", header:"Title", width:150 }, { id:"start_date", header:"Start date", width:250, type:"date" } ], server:"https://myapp.com/myexport/gantt", visual:true, cellColors:true, data:{}, date_format: "dddd d, mmmm yyyy" });
默认日期参数
导出模块期望start_date和end_date列具有Date类型,而duration列具有number类型。
在应用自定义模板的情况下,要么返回预期类型的值,要么在列配置的name属性中定义不同的值。例如:
gantt.config.columns = [ ... {name: "start_date", align: "center", width: 100, resize: true, editor: start_dateEditor}, {name: "end_date", align: "center", width: 100, resize: true, editor: end_dateEditor}, {name: "duration_formatted", align: "center", width: 40, resize: true, editor: durationEditor, template: function(task){ return formatter.format(task.duration_formatted); } }, ... ];
否则,甘特图数据将不会被导出。
设置要导出的自定义数据源
要使用自定义数据集(即不使用初始甘特图中显示的数据)导出甘特图,请使用exportToExcel方法的参数中的data属性:
gantt.exportToExcel({ name:"document.xlsx", data:[ {id:1, text:"Project #1", start_date:"01-04-2020", duration:18}, {id:2, text:"Task #1", start_date:"02-04-2020",duration:8, parent:1}, {id:3, text:"Task #2", start_date:"11-04-2020",duration:8, parent:1} ] });
添加要导出的任务颜色
您可以通过将视觉属性的值设置为"base-colors"来将任务的颜色添加到甘特图的导出Excel文件中:
gantt.exportToExcel({ visual: "base-colors", cellColors: true })
2、从Excel导入
由于无法自动将Excel文档的任意列映射到甘特数据模型,因此导出服务将文档转换为以JSON形式返回的行数组。将生成的文档转换为甘特图数据是最终开发人员的责任。
为了转换Excel文件,您需要向导出服务发送以下请求:
请求参数为:
例如:
或者,您可以使用客户端 API:
gantt.importFromExcel({ server:"https://export.dhtmlx.com/gantt", data: file, callback: function(project){ console.log(project) } });
其中file是File的一个实例,它应该包含一个 Excel (xlsx) 文件。
响应:将包含一个带有对象数组的JSON:
[ { "Name": "Task Name", "Start": "2018-08-11 10:00", "Duration": 8 }, ... ]
位置:
导入设置
导入服务期望导入工作表的第一行是包含列名的标题行。
默认情况下,该服务返回文档的第一页。要返回不同的工作表,请使用工作表参数(从零开始)
gantt.importFromExcel({ server:"https://export.dhtmlx.com/gantt", data: file, sheet:2, // print third sheet callback: function (rows) {} });
3、导出到iCal
要将数据从甘特图导出到iCal字符串,请执行以下操作:
在页面中包含“https://export.dhtmlx.com/gantt/api.js”文件以启用在线导出服务:
调用exportToICal方法从甘特图中导出数据:
导出方法的参数
exportToICal ()方法将具有以下属性的对象作为参数(可选):
gantt.exportToICal({ server:"https://myapp.com/myexport/gantt" });