jQuery Gantt Package使用教程：如何使用反应样本

jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

jQuery Gantt Package试用版

反应样本

你可以在下面的路径中找到反应样本，

/PlatformSamples/React/Samples.

注意:您还可以在以下路径中找到可选的React Visual Studio项目或解决方案，

/PlatformSamples/React/GanttInReact.csproj.

如何运行反应样品

您可以使用NPM(cmd)、Visual Studio 2017版本或Visual Studio代码运行React甘特样例。对于所有这3种方法，您需要首先使用npm来安装相关的’node_modules’，如下面的步骤所示。(‘node_modules’包依赖关系已经在‘package’中指定了。json文件。)

另外，确保将您的npm更新为最新版本(使用“npm版本”来确定您的版本)。要更新到最新，使用cmd行:”npm install npm@latest -g”。

使用NPM运行React示例的步骤:

1. 使用“作为管理员运行”选项在命令提示符中浏览到项目目录(..PlatformSamplesReact)。
2. 输入“npm install”。这将在node_modules文件夹中安装依赖的模块。
3.运行“npm start”。
4. 示例自动在默认浏览器中运行。否则，复制端口并粘贴到任何浏览器中。

使用Visual Studio 2017运行React示例的步骤:

1. 使用“npm Install webpack -g”和“npm Install webpack-cli -g”全局安装webpack和webpack-cli。
2. 安装’node_modules’包(上面NPM步骤中的步骤1和步骤2)
3.然后打开’.csproj’与Visual Studio 2017的项目目录，并照常运行它。

使用Visual Studio代码运行React示例的步骤:

1. 打开Visual Studio代码IDE
2. 使用File—>打开文件夹导入React gantt项目
3.使用视图——>集成终端打开命令窗口，并选择Terminal选项卡
4. 然后按照上面NPM步骤中的步骤2到步骤4执行。

反应甘特结构和安装

React甘特包可以在/PlatformSamples/React中找到

创建您的项目目录，并根据需要构造它。我们的是这样的，

• package.json。
• index . html。
• webpack.config.js。
• Src文件夹。
• 数据源文件夹。

package.json

“package.json”的文件指定了项目名称、描述和反应、Webpack和Babel包，这些包可以在npm安装期间安装。

配置Webpack

在这里，我们通过在webpack.config.js文件中添加所需的配置来为React甘特设置webpack。

const path = require('path');const webpack = require('webpack');module.exports = {    entry: {        // Here, Webpack to start bundling our app at following paths.        GanttControlSkeleton: './Samples/GanttControlSkeleton/GanttControlSkeleton',        FlexyGanttSkeleton: './Samples/FlexyGanttSkeleton/FlexyGanttSkeleton.jsx'    },    output: {        // Output our app to the dist/ directory with Sample name. (eg: dist/SampleBrowser.js)        path: path.resolve(__dirname, 'dist'),        filename: '[name].js',        publicPath: 'dist/'    },    devServer: {        inline: true,        port: 3000    },    // devtool enhances the debugging process    devtool: 'inline-source-map',    resolve: {        // add alias for application code directory        alias: {            RQSrc: path.resolve(__dirname, 'Src'),            Samples: path.resolve(__dirname, 'Samples'),        },    },    //Webpack uses loaders to translate the file before bundling them.    module: {        rules: [            {                test: /.jsx/, loader: 'babel-loader',                exclude: /node_modules/,                //Configuring babel                query: {                    presets: ['es2015', 'react']                }            },            {                test: /.css$/,                use: [                    "style-loader",                    "css-loader"                ]            },            {                test: /.(png|jp(e*)g|svg)$/,                use: [{                    loader: 'url-loader',                    options: {                       limit: 8000,                        name: 'images/[hash]-[name].[ext]'                    }                }]            },        ],    },};                                                                 webpack.config.js

如欲进一步了解webpack，请参阅以下连结webpack。

“Src”文件夹

“Src”文件夹包含需要运行甘特的源文件，如ResourceStrings、脚本、样式，它还包括“React_components”文件夹，其中包含“GanttControl”。jsx”和“FlexyGantt。jsx”，这些组件被导出其功能，并且可以通过导入组件在任何地方使用。

“样品”文件夹

它包含示例来说明我们的特性和用法。

相关产品介绍：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件
AnyGantt：构建复杂且内容丰富的甘特图的理想工具
phGantt Time Package：对任务和时间的分配管理的甘特图
dhtmlxGantt：交互式JavaScript / HTML5甘特图

想要购买甘特图正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：