`

毕业设计管理系统之三gantt学习部分知识整理

阅读更多

 Gantt文档

 

<!--[if !supportLists]-->1、 <!--[endif]-->gantt构造函数

var gantt = new GanttChart();

gantt.create(divID);   divID是作为甘特图的父容器;

create方法应该在gantt属性设置之后调用;

示例代码:

 

 

 

 

 

 

 

 

 

 

 

 

 

2、GanttProjectInfo构造函数

var project1 = new GanttProjectInfo(id, name, startDate);

id:项目编号

name:项目名称

startDate:项目开始日期

注意:javascript 中日期对象月份是从0 开始的;示例代码是表示:2014年6月28号;

 

 

 

 

 

 

3、GanttTaskInfo构造函数

var parentTask1 = new GanttTaskInfo(id, name, EST, duration, predecessorTaskId);

id:     任务编号

name:任务名称

EST   :计划任务开始时间

duration:任务工期(按

predecessorTaskId:前置任务编号

 

 

 

示例代码:

 

 

 

 

 

 

 

 

4、dhtmlxGantt API 方法

我们有两种类型对象:分别是设计时对象和运行时对象;

设计时对象(GanttProjectInfoGanttTaskInfo ):在调用create方法之前初始化内容;

运行时对象(GanttChartGanttProjectGanttTask):在调用create方法之后可以操作的对象。

 

4.1设计时对象API

GanttProjectInfo对象

addTask

给项目增加特定的GanttTaskInfo对象

deleteTask

从项目中删除对象

getTaskById

根据编号返回GanttTaskInfo对象

 

 

GanttTaskInfo对象

addChildTask

给GanttTaskInfo对象增加子任务

var parentTask1 = new GanttTaskInfo(1, "Old code review", new Date(2014528), 29, "");

 

parentTask1.addChildTask(new GanttTaskInfo(2, "Convert to J#", new Date(20146, 11), 12, ""));

 

var childTask2 = new GanttTaskInfo(3, "Hosted Control", new Date(2014,7, 7), 10, "1");

parentTask1.addChildTask(childTask2 );

 

4.2运行时对象API

4.2.1  GanttChart对象api

 

GanttChart对象

初始化方法 - create()方法之前调用

addProject

给gantt增加GanttProjectInfo对象

attachEvent

增加不同类型的事件处理

ganttChart.attachEvent(evName, evHandler);

evName:事件名称,注意大小写敏感;

evHandler:用户定义事件处理方法;

onBeforeContextMenu:  occurs when user clicks the mouse button on Tree items.

onTaskClick :     occurs when user clicks a Task item.

onTaskStartDrag : occurs when user starts to drag a Task item.

onTaskDragging :  occurs while user is dragging a Task item.

onTaskEndDrag : occurs when user finished to drag a Task item.

onTaskStartResize  occurs when user starts to resize a Task item.

onTaskResizing  occurs while user is resizing a Task item.

onTaskEndResize  occurs when user finished to resize a Task item. 

create

在页面上创建GanttChart对象

getMonthScaleLabel

returns a string representation of current month for the month scale row; you may override this function to customize the label

setContextMenu

adds custom context menu of type dhtmlXMenuObject

setEditable

defines whether GanttChart is editable by user

setImagePath

sets path to image directory

setMonthNames

defines full month names for your locale

setShortMonthNames

defines short month names for your locale

setStylePath

set path to styles file, default is “codebase/style.css”; used in simple printing method printToWindow

showContextMenu

enables or disables default context menu in tree, which can be used for basic task manipulations

showDescProject

enables or disables inline project description (displayed right after the project bar), and configures the shown values

showDescTask

enables or disables inline task description (displayed right after the task bar), and configures the shown values

showNewProject

show/hide new project bar at start-up; it is useful if you have no project at all, and user needs some start point where the menu is attached

showTooltip

show/hide task & project tooltip (info panel)

showTreePanel

show/hide left side tree panel

useShortMonthNames

use short or full month name in the month label axis

 

GanttChart对象

运行时方法 - create()方法之前调用

clearAll

clears all control's contents

deleteProject

deletes project from chart by id

getPrintableHTML

returns chart in html format suitable for printing, full-sized and without scrollbars

getProjectById

returns GanttProject object by id

getXML

returns XML string representation of the chart content

insertProject

inserts new project with specified id, name, start date and returns it

loadData

loads XML data from string or file

printToWindow

opens chart full-sized in a new window, from where you can print it as you like

saveData

saves XML data to server using URL specified in setSavePath and encoding “application/x-www-form-urlencoded”

setLoadPath

sets URL which is used to load chart data with loadData method调用服务器端servlet来载入数据;loadData方法之前调用;

setSavePath

sets URL which is used to save chart data with saveData method:调用服务器端servlet来保存数据,saveDate方法之前调用;

 

4.2.2  GanttProject对象api

GanttProject对象

isProject

this is object property, equals true; used to distinguish Project and Task in menu event handler

deleteTask

deletes task from project by id

getDuration

calculates and returns the duration of project in hours

getId

returns id of project

getName

returns name of project

getPercentCompleted

calculates and returns percent completed of project

getStartDate

returns start date of project

getTaskById

returns GanttTask object by id

insertTask

inserts new task with specified id, name, start date, duration, percent completed, predecessor task Id, parent task Id and returns it

setName

sets name of this project

setPercentCompleted

sets percent completed for this project

 

4.2.3  GanttTask对象api

GanttTask对象

isTask

this is object property, equals true; used to distinguish Project and Task in menu event handler

getDuration

返回工期(用小时表示)

getEST

获取任务计划开始时间

getFinishDate

计算返回任务完成时间

getId

返回任务编号

getName

返回任务名称

getParentTaskId

返回父任务编号

getPercentCompleted

获取任务完成比例

getPredecessorTaskId

获取前置任务编号

setDuration

设置任务工期

setEST

设置任务计划开始时间

setName

设置任务名称

setPercentCompleted

设置任务完成百分比

setPredecessor

设置前置任务

var task121 = project2.getTaskById(121);

task121.setPredecessor(120);

 

// to remove the connection

var task122 = project2.getTaskById(122);

task122.setPredecessor("");

 

5、xml文件结构

<?xml version="1.0" encoding="UTF-8"?>

<projects>

  <project id="1" name="project1" startdate="2006,12,14">

     <task id="1">

  <name>project1 task1</name>

<est>2006,12,14</est>

<duration>120</duration>

    <percentcompleted>60</percentcompleted>

<predecessortasks></predecessortasks>

            <childtasks>

                  <task id="2">

                    <name>project1 task2</name>

                  <est>2006,12,14</est>

            <duration>100</duration>

                <percentcompleted>20</percentcompleted>

            <predecessortasks></predecessortasks>

                    <childtasks></childtasks>

          </task>

                  <task id="6">

                <name>project1 task6</name>

            <est>2006,12,15</est>

                <duration>90</duration>

            <percentcompleted>10</percentcompleted>

            <predecessortasks>2</predecessortasks>

                    <childtasks></childtasks>

                  </task>

            </childtasks>

     </task>

  </project>

  <project id="2" name="project2" startdate="2006,12,20">

     <task id="12">

<name>project2 task12</name>

<est>2006,12,20</est>

<duration>140</duration>

<percentcompleted>60</percentcompleted>

<predecessortasks></predecessortasks>

        <childtasks>

            <task id="14">

        <name>project2 task14</name>

       <est>2006,12,20</est>

       <duration>100</duration>

        <percentcompleted>20</percentcompleted>

       <predecessortasks></predecessortasks>

                <childtasks></childtasks>

        </task>

        </childtasks>

     </task>

  </project>

</projects>

窗体顶端

窗体底端

 

<!--EndFragment-->
分享到:
评论

相关推荐

    图书馆管理系统Gantt图

    图书馆管理系统Gantt图,基于Visio 2016绘制的Gantt图

    精品--毕业设计管理系统.zip

    【毕业设计管理系统】是一个综合性的IT项目,通常涵盖了软件工程中的多个重要环节,如需求分析、系统设计、编码实现、测试以及后期维护等。在这个系统中,学生、指导教师、评审专家等多个角色可以进行交互,完成从...

    dhtmlxGantt.doc

    dhtmlxGantt 甘特图组件使用指南 dhtmlxGantt 是一个 JavaScript 组件,能够创建动态的甘特图和...通过学习和使用 dhtmlxGantt,我们可以更好地展示项目计划的进度和任务的开始和结束时间,提高项目的管理和执行效率。

    dhtmlxGantt.rar

    在Web端使用dhtmlxGantt时,开发者需要注意以下几点关键知识点: 1. 数据绑定:dhtmlxGantt支持多种数据格式,如JSON、XML或CSV,开发者需要根据实际需求选择合适的数据格式,并设置相应的数据源。 2. 任务和依赖...

    ext-gantt1.8

    可应用于项目管理系统、生产执行系统(MES)、资源管理 系统(ERP)或其它的任务资源分配相关领域的应用程序的。Ext Gantt甘特图完全兼容Extjs语法,熟悉Extjs可以轻易上手。 Ext Gantt甘特图可与任意后端代码(asp...

    JQuery Gantt-Demo

    JQuery Gantt-Demo是一个基于JQuery库的项目管理工具,用于展示甘特图,这是一种流行的数据可视化方式,尤其在项目管理和任务调度中广泛应用。甘特图通过条形图显示项目的时间线,使得用户可以清晰地看到各个任务的...

    dhtmlxGantt 介绍以及使用说明

    dhtmlxGantt 是一款基于 JavaScript 的强大甘特图组件库,它属于 dhtmlxSuite 中的一部分。该组件库提供了创建交互式甘特图所需的所有工具,非常适合于项目管理和任务跟踪应用的开发。dhtmlxGantt 的主要优势在于其...

    gantt图的简单做法示例精典

    总结起来,"Gantt图的简单做法示例精典"主要涵盖了以下几个知识点: 1. Gantt图的基本概念:任务、持续时间、开始日期、结束日期和依赖关系。 2. 在JAVA中使用JFreeChart库创建Gantt图的步骤。 3. 如何扩展Gantt图以...

    VB毕业设计——vb课题项目进程管理系统设计(论文+源代码+开题报告+外文翻译+答辩PPT).zip

    《VB毕业设计——VB课题项目进程管理系统》是一个综合性的学习资源包,包含了完整的毕业设计流程,包括论文、源代码、开题报告、外文翻译以及答辩PPT。这个系统是用Visual Basic(VB)开发的,旨在管理和跟踪项目...

    银行系统Gantt chart

    Man Xu擅长系统设计、数据库设计和用户管理系统设计;Yijing Wang专注于储蓄系统的设计、开发和实施;Jinliang Li负责贷款系统的全流程;Ziwei Zhang专长于储蓄系统的需求分析和测试描述等。合理的人员分配是保证...

    科研管理系统 。。。毕业设计.zip

    在这个"科研管理系统毕业设计"项目中,我们可以推测这是一个针对计算机科学与技术专业学生的课程设计任务,旨在锻炼学生在实际开发环境中应用所学知识的能力。 该项目名为"ScientResearch-master",暗示了它可能是...

    Devexpress Gantt

    Devexpress Gantt是一款由DevExpress公司开发的用于创建和展示...通过学习和实践Devexpress Gantt,开发者不仅可以提升项目管理技能,还能增强在UI设计和编程上的能力,为构建高效、直观的项目管理应用打下坚实基础。

    项目管理_gantt

    项目管理

    dhtmlxGantt_v4.0.0

    **dhtmlxGantt_v4.0.0:深度解析甘特图库的资源与应用** **一、dhtmlxGantt简介** dhtmlxGantt是一款强大的JavaScript库,专门用于创建交互式的甘特图。它允许用户在网页上直观地展示项目计划,包括任务、依赖关系...

    jquery+layui+bootstrap+dhtmlxgantt开发任务进度处理的gantt图示例.rar

    2. **LayUI**:LayUI是一个前端UI框架,提供了丰富的组件和优雅的样式,适用于后台管理系统。它包括表格、表单、按钮、提示等模块,与jQuery结合可以快速构建界面。在甘特图应用中,LayUI可能被用来设计和布局页面,...

    Gantt chart开源软件

    e-gantt是专为那些寻求在Java环境中实现Gantt图功能的开发者和项目管理者设计的。它利用Java Swing库,这是一个用于构建桌面应用的组件集合,提供了丰富的用户界面和交互功能。Swing库使得e-gantt可以跨平台运行,...

    jQuery-ganttView 资源甘特图

    ### 三、jQuery-ganttView的应用场景 - **项目管理**:在软件开发、建筑施工等项目中,用于展示项目进度和计划。 - **团队协作**:协助团队成员了解各自的任务分配和截止日期,提高协作效率。 - **资源调度**:在...

    前端项目-frappe-gantt.zip

    【前端项目-frappe-gantt】是一个专为前端开发者设计的开源项目,旨在提供一个轻量级、现代化且交互性强的网络甘特图库。这个项目的主要目标是帮助开发者轻松地在网页应用中集成甘特图功能,以清晰、直观地展示项目...

    本科毕设(已开源) -《本科毕业设计综合信息管理系统》.zip

    《本科毕业设计综合信息管理系统》的开源性质意味着任何人都可以学习、修改和贡献代码,进一步推动该项目的发展,为更多用户提供便利。通过这个系统,我们可以深入理解软件工程中的各个环节,包括需求分析、设计、...

Global site tag (gtag.js) - Google Analytics