Bootstrap

一文搞定dhtmlx-gantt调度界面,vue下使用dhtmlxgantt进行项目甘特图模块设计开发(前端界面显示篇(1))

前言:

本文基于在较为成熟完整的项目,进行甘特图模块开发的内容。并不涉及node相关下载、安装及vue的相关使用。

1 需安装的模块

npm install dhtmlx-gantt
npm install font-awesome

(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库,用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库,提供了一套完整的Ajax驱动的UI组件。

(2)font-awesome为图标字体库和css框架。提供了各类css样式。

2 引入模块

    import { gantt } from 'dhtmlx-gantt';
    import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
    import 'font-awesome/css/font-awesome.min.css';

(1)引用dhtmlxgantt.css样式,显示插件界面;

(2)引用font-awesome.min.css图标,为了显示各种图表插件。

3 设计页面格式内容

(1)前端展示界面设计:

//采用html5的el插件进行前端界面设计
<template>
//建立容器,在容器下存储界面样式与风格
  <div class="app-container">
//容器下设计gantt-container,用以装载甘特图界面的显示内容
    <div ref="gantt" class="gantt-container"></div>
//调用官方在线接口,设置摁钮方式实现甘特图导出(支持多种常见格式)
    <input value="导出PDF" type="button" onclick="gantt.exportToPDF()"/>
    <input value="导出Excel" type="button" onclick='gantt.exportToExcel()'/>
    <input value="导出Png" type="button" onclick="gantt.exportToPNG()"/>
    <input value="载入execl" type="button" onclick="gantt.load()"/>
    //自动导入文件并解析为json格式,便于后续开发导入json数组自动生成甘特图。
<form action="https://export.dhtmlx.com/gantt" method="post"
          enctype="multipart/form-data">
          <input type="file" name="file" />
          <input type="" name="type" value="excel-parse"/>
          <button type="submit">转为json文件</button>
    </form>
  </div>
</template>

(2)甘特图显示设计(请参考官方文件(内容很全只是为英文文档):

界面示例,可在线编辑操作,便于学习:Gantt : Samples (dhtmlx.com)

官方学习文档:Gantt API Gantt Docs (dhtmlx.com)

一个网址讲解基本与官方文档一致较为详细:dhtmlxGantt使用教程:如何导出/导入Excel,导出到iCal-控件新闻-慧都网 (evget.com)

一个官方博客,里面解决一些较为复杂的问题,并有示例代码可在线编辑操作:

DHTMLX Blog - DHTMLX JavaScript Library - News, tips, and info.