jQuery Gantt Package创建甘特样本反应教程

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

点击下载jQuery Gantt Package试用版

从所需的路径中导入react库和“GanttControl”组件，如“RQSrc/React_Components/GanttControl.jsx”。
import * as React from “react”;
import * as ReactDOM from “react-dom”;
import GanttControl from ‘RQSrc/React_Components/GanttControl.jsx’;
import ‘./GanttControlSkeleton.css’;
export default class GanttControlSkeleton extends React.Component{
constructor(){
super();
this.anchorTime = new Date(“2014-02-01T00:00:00-00:00”);
}

GanttChartTemplateApplied(sender, args) {
    var $GanttChart = args.element;
    $GanttChart.GanttChart({ AnchorTime: this.anchorTime });
}

render(){
     var height =
         {
             height: '495px'
         };
     return(
        <div style={height}>
              {/* passing Url,ProjectStartDate,GanttChartTemplateApplied  as a props of GanttControl */}
             <GanttControl Url= './DataSource/GanttControlSkeleton.json'
                ProjectStartDate={this.anchorTime}
                GanttChartTemplateApplied={(sender, args) => this.GanttChartTemplateApplied(sender, args)}/>
         </div>
     );
}

}
ReactDOM.render(, document.getElementById(‘container’));
GanttcontrolSkeleton.jsx
ReactDOM.render方法可以将“GanttcontrolSkeleton”组件呈现到DOM中。这里，第二个参数“container”指定挂载元素。在"index.html"中定义的挂载元素。
以下路径说明了这一点:
In React : \PlatformSamples\React\Samples\GanttcontrolSkeleton\GanttcontrolSkeleton.jsx.

相关产品介绍：

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

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要了解甘特图或慧都APS系统，请登录慧都网咨询在线客服，解决您的问题！
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果
原文链接：https://www.evget.com/article/2020/10/13/38608.html