jQuery Gantt Package创建甘特样本反应
jQuery Gantt Package是一个真正的跨平台,基于HTML5 / jQuery的本地实现,具有2个不同的gantt小部件,可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展,可轻松集成到现有应用中。
从所需的路径中导入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(<GanttcontrolSkeleton />, document.getElementById('container'));
GanttcontrolSkeleton.jsx
ReactDOM.render方法可以将“GanttcontrolSkeleton”组件呈现到DOM中。这里,第二个参数“container”指定挂载元素。在"index.html"中定义的挂载元素。
以下路径说明了这一点:
In React : \PlatformSamples\React\Samples\GanttcontrolSkeleton\GanttcontrolSkeleton.jsx.
APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率
想要了解甘特图或慧都APS系统,请登录慧都网咨询在线客服,解决您的问题!
本文章转载自【慧都科技】evget欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果