jQuery MiniUI

标题: 普加甘特图和Vue、React、angularJS等框架的集成 [打印本页]

作者: felt 时间: 2019-1-25 11:05:46 标题: 普加甘特图和Vue、React、angularJS等框架的集成

本帖最后由 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模板
[attach]11921[/attach]
app.vue内引入Gantt控件

5、执行npm run dev运行项目

这压缩包里是相关代码，新建一个vue项目之后把这几个文件拷贝覆盖就可以了
[attach]11922[/attach]
-----------------------------------------------------------------------------------------------------------------------------------------------------------

普加甘特图和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内创建模板和使用
[attach]11925[/attach]
5、执行npm start运行项目
这压缩包里是相关代码，新建一个React项目之后把这几个文件拷贝覆盖就可以了
[attach]11923[/attach]
-----------------------------------------------------------------------------------------------------------------------------------------------------------
普加甘特图和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块，用于渲染甘特图

[attach]11928[/attach]

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

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

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)