jQuery MiniUI

 找回密码
 立即注册
查看: 13201|回复: 0

普加甘特图和Vue、React、angularJS等框架的集成 [复制链接]

Rank: 8Rank: 8

发表于 2019-1-25 11:05:46 |显示全部楼层
本帖最后由 felt 于 2019-1-25 15:16 编辑

普加甘特图和Vue框架的集成
1、 创建一个Vue项目
     vue init webpack vue-gantt-demo  
     npm install


2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内static文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外,还有2个示例文件 (这两个文件在vue-gantt-demo的压缩包内)
   project.txt文件           示例没有后台加载,所以我们用了这静态数据,真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成,操作代码都可以在这里处理

3、引用  
   index.html内
   引入甘特图的js  boot.js和GanttController.js

4 、创建
   src文件夹内处理
   components下 创建Gantt.vue模板

    app.vue内引入Gantt控件

5、执行npm run dev运行项目

这压缩包里是相关代码,新建一个vue项目之后把这几个文件拷贝覆盖就可以了

-----------------------------------------------------------------------------------------------------------------------------------------------------------

普加甘特图和React框架的集成
1、创建一个React:项目
      npm install -g create-react-app
      create-react-app react-gantt-demo

2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内public文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外,还有2个示例使用到文件(这两个文件在react-gantt-demo的压缩包内)
   project.txt                 示例没有后台加载,所以我们用了这静态数据,真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成,操作代码都可以在这里处理

3、引用  
   public/index.html内
   引入甘特图的js  boot.js和GanttController.js

4、创建
   src/app.js内创建模板和使用

5、执行npm start运行项目
这压缩包里是相关代码,新建一个React项目之后把这几个文件拷贝覆盖就可以了

-----------------------------------------------------------------------------------------------------------------------------------------------------------
普加甘特图和AngularJs框架的集成
1、 创建一个AngularJs项目
     npm install -g @angular/cli
     ng new angular-gantt-demo
2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内src/assets文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外,还有2个示例文件 (这两个文件在angular-gantt-demo的压缩包内)
   project.txt文件           示例没有后台加载,所以我们用了这静态数据,真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成,操作代码都可以在这里处理

3、引用  
   src/index.html内
   引入甘特图的js  boot.js和GanttController.js

4 、创建
   src/app文件夹内处理
   app.component.ts            创建模板

   app.component.html         模板页面内创建div块,用于渲染甘特图


   

5、执行ng serve --open运行项目

这压缩包里是相关代码,新建一个angularJs项目之后把这几个文件拷贝覆盖就可以了


附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Archiver|普加软件

GMT+8, 2022-6-28 14:12 , Processed in 0.033634 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部