基于列模板技术的双线条甘特图的应用与实现

雪 连,李 家

(辽宁师范大学 城市与环境学院, 辽宁 大连 116029)

基于列模板技术的双线条甘特图的应用与实现

雪 连,李 家

(辽宁师范大学 城市与环境学院, 辽宁 大连 116029)

针对B/S模式下甘特图交互操作性差、传统的单线条甘特图不便于对比分析项目的计划和实施情况等问题，提出了利用列模板技术实现双线条甘特图的解决方案。甘特图中包含上下两根线条，分别代表项目的进度计划和实施情况。用户通过简单地点击甘特图可以对计划进行微调，对实施进行记录。使用结果表明，这种双线条甘特图扩展了甘特图的使用方式，可以直观地对比检查计划和实施情况；交互操作性好，易于掌握和使用；基于通用的列模板技术，易于开发。

项目进度管理;甘特图;列模板;DevExpress ASPxGridView

0 引言

项目进度控制是项目计划控制的中心任务和重要内容，它直接关系到项目能否按期完成，并最终影响项目的成功[1]。甘特图是进行工期计划和控制的有效工具，它以横坐标表示时间，纵坐标表示项目分解的各项工作任务， 清楚地表达了活动的开始时间、结束时间和持续时间[2]。目前已经可以基于B/S模式绘制甘特图[2-5]。

以往所见的甘特图是一条线条图，表示在整个期间上计划或实施情况。这种方式不能直观表达计划方案与实际完成情况的对比，不便于检查和大数据挖掘。另外，受计算机软件技术发展所限，有些以Web方式实现的甘特图只能将数据显示为图形，不能与图形进行直观的互操作，反作用于数据；有些甘特图软件的开发方法过于复杂，不易实现。

由于在使用甘特图进行项目管理系统开发时遇到了上述问题，因此在工作中以提高甘特图的互操作性和直观对比计划和实施情况为研究目的，基于B/S模式以常用的列模板技术实现了甘特图。系统中采用上下两根线条表示一项任务的计划和实施情况，如图1所示。上面的计划条如为灰色表示该时段有这项任务的计划，下面的实施条如为黑色表示该时段的任务已实施。在计划阶段，用户可以通过选择起止日期对整个区间设定计划，可以点击某个时间段的任务块进行微调，取消或设定该时间段的计划。在实施阶段，用户可以在完成某个时间段的任务后点击该时间段的任务块，使该任务块中下面的实施条从灰变红，表示实施了该时段的任务。系统扩展了甘特图的使用方式，提供了较好的交互操作功能和用户体验，同时因采用了常用的模板技术开发而易于实现。

图1 双线条的甘特图

1 系统设计与实现

系统的实现方法如下：

(1)确定计划和实施值在数据库中存储方式。因时间段很多，不能为每个时间段建立一个字段，各时间段的计划和实施值在数据库要分别合并存储为一个字符串；

(2)将数据库中的表取到程序中后，自动增加各时间段的字段，以便用户可以对每一个时间段中的任务块进行交互处理；

(3)将数据表每条记录中的计划和实施值转换为各时间段字段的值；

(4)将步骤(2)～(3)改造后的数据表绑定到ASPxGridView后，将各时间字段的值表现为任务块图片；

(5)为每个任务块图片的鼠标点击事件给出客户端响应函数，改变图片的颜色。

1.1 计划、实施数据在数据库中的存储

系统中需将每项任务的起止日期、计划、实施情况记录到数据库中。本系统中以半天作为最小时间段，为节省存储空间，没有为每个时间段建立一个字段，而是将所有时间段的计划值和实施值分别记录在一个字符串字段中，用“1”或“0”表示该时间段是否有值，每个字符在串中的位置隐含了其代表的时间段。例如，图2中，第一条记录中，计划字段中的第一个字符“1”表示9月6日上午有方案制定任务，实施字段中的第三个字符“1”表示9月7日上午实施了方案制定任务。

程序中制定计划并存储的主要代码为：

string plan = "", real = "";

for (DateTime date1 = (DateTime)newValues["起始日期"]; date1 <= (DateTime)newValues["截止日期"]; date1 = date1.AddDays(1))

{

plan += "11";

real += "00";

}

row["计划"] = plan;

row["实施"] = real;

代码中newValues["起始日期"]和newValues["截止日期"]为用户在为某项任务制定计划界面上输入的起止日期，row为在数据表中为该任务新增的一条记录，制定计划时每天的计划值为“11”，实施值为“00”，将其累加后赋给row中对应的字段值，更新到数据库中。

1.2 增加时间段字段

图2中的数据的前两行在系统中的显示结果如图1所示。图1中各时间段字段不是数据库中已有字段，而是将数据取到程序中后，根据起止日期为数据表中增加的字段。主要代码如下：

TimeSpan ts = date2 - date1;

string[] fields = new string[(ts.Days + 1) * 2];

for (int i = 0; i < fields.Length; date1 = date1.AddHours(12), i++)

{

string s = date1.Year.ToString().Substring(2) + "-" + date1.Month + "-" + date1.Day;

if (date1.Hour < 12)

s += "上午";

else

s += "下午";

fields[i] = s;

table.Columns.Add(s);

}

代码中date1、date2为要显示的时间段的起止日期，fields为根据起止日期建立的时间字段名数组，循环中根据起止日期生成每个时间段字段的名称，最后增加到数据表table的列中。

1.3 确定记录中时间段字段的值

时间段字段中的值是在程序中根据计划、实施字段值生成的，代码为：

row[s1] = "" + row["计划"].ToString()[k] + row["实施"].ToString()[k];

代码中row为某一条任务记录，s1为某一个时间段的字段名，row["计划"].ToString()[k]为计划字段中从起始日期开始第k个半天的值，row["实施"].ToString()[k]为实施字段中第k个半天的值，row[s1]为计算后得到的s1字段的值，它可能的值为：“00”、“01”、“10”、“11”。以其中两例说明：“10”值采用列模板技术显示在界面中时对应的任务块图片名称为 “10.png”，该图片的计划条为灰色，实施条为浅灰色；“11”对应的任务块图片名称为 “11.png”，该图片的计划条灰色，实施条为黑色。

1.4 利用列模板将时间字段值表现为任务块图片

ASP.NET为了更精确地控制列的内容和布局，在DataGrid中支持绑定列和模板列的定义，该模板列可创建HTML文本和服务器控件的组合，以便为列设计自定义布局[6]。这种列模板技术易于掌握，为表现复杂的页面提供了方便的工具。本系统利用DevExpress 的ASP.NET 控件库ASPxGridView中的列模板表现甘特图。

程序中取到数据表增加时间段字段并为每条记录的时间段字段赋值后，绑定到ASPxGridView中，利用ASPxGridView的列模板将表中每行中每个时间段字段列显示为与该列字段值对应的任务块图片。代码为：

(ASPxGridView1.Columns[i]as GridViewDataColumn). DataItemTemplate = new scheduleItemTemplateG( ASPxGridView1.Columns[i].FieldName);

代码中Columns[i]为某一时间段列，DataItemTemplate为该列的数据模板属性，scheduleItemTemplateG为自定义的模板类，在该类中为每行每列的值显示相应的图片。主要代码如下：

public class scheduleItemTemplateG : System.Web.UI.Page, ITemplate

{

string field;

public scheduleItemTemplateG(string field)

{

this.field = field;

}

public void InstantiateIn(Control container)

{

…

GridViewDataItemTemplateContainer gridContainer = (GridViewDataItem TemplateContainer)container;

ASPxHyperLink link = new ASPxHyperLink();

link.ImageUrl = imgPath + gridContainer.Text + ".png";

…//为超链增加客户端点击事件处理函数

gridContainer.Controls.Add(link);

}

}

代码中在该类的构造函数中传入了该列时间字段的名称，记录在field成员中。InstantiateIn函数在该行该列显示时自动调用，传来了该行该列中的控件容器。函数中imgPath为图片所在路径，gridContainer.Text为控件中显示的字符串，其值为该列的计划字符+实施字符，imgPath + gridContainer.Text + ".png"为包含路径在内的图片名称，将其赋给新建超链link的ImageUrl属性，以便在超链中显示该图片。最后将超链加入到该控件容器中，显示为图片。

1.5 处理任务块图片的鼠标点击事件

在计划制定时可以进行微调，如图3所示，用户点击“微调”按钮，然后点击某个时段的任务块，就能取消或设定该时段的计划。类似地，点击“执行任务”按钮可以在实施时标识某个时段的任务已执行，如图4所示。这需要对每个任务块超链的客户端点击事件给出响应函数，以便在客户端改动任务块图片的计划条或实施条的颜色，同时改动该任务块对应于计划字段或实施字段字符串中的那个字符的值。

图3 计划制定界面

图4 计划实施界面

为此，在上述代码“为超链增加客户端点击事件处理函数”注释处增加以下代码：

DateTime startDate = (DateTime)gridContainer.Grid.GetRowValues(gridContainer. VisibleIndex, "起始日期");

DateTime date = Convert.ToDateTime("20" + field.Replace("上午?", "").Replace("下午", ""));

int indexInValueArray = (date - startDate).Days*2 + (field.IndexOf("上午") > 0 ? 0 : 1);

link.ClientSideEvents.Click = "function(s,e){onLinkClick(e," + gridContainer. VisibleIndex + "," + indexInValueArray + ")}";

代码中startDate为表中该行任务的起始日期，date为该列字段名(某天的上午或下午)代表的日期，indexInValueArray为该时间字段列在时间字段数组中的序数，也就是该列在计划和实施字段中对应字符的下标。onLinkClick为超链的客户端Click事件的响应函数，响应函数中传入了该列所在的行数和该列在计划和实施字段中对应字符的下标。JavaScript中onLinkClick函数的主要代码如下：

function onLinkClick(e, rowIndex, indexInValueArray)

{

if (document.getElementById("rowIndex_button").value.indexOf("微调") > 0)

var w = -2;

else

var w = -1;

var n = e.htmlElement.innerHTML.indexOf(".png");

var s = e.htmlElement.innerHTML.substring(0, n + w) + s1 + e.htmlElement.innerHTML. substring(n + w + 1);

e.htmlElement.innerHTML = s;

…

var value = document.getElementById("valueArray").value;

document.getElementById("valueArray").value = value.substring(0, indexInValueArray) + s1 + value.substring(indexInValu eArray + 1);

}

代码中e.htmlElement为事件中鼠标所点超链，n为扩展名“.png”在该超链的innerHTML中的位置。如果在计划阶段点击“微调”按钮修改计划(见图3)，则w=-2，s1对应图片名中的第一个字符即计划字符；如果点击“执行任务”或“结束任务”按钮(见图4)，则w=-1,s1对应图片名的第二个字符即实施字符。s1 的值为跟头键值，原来为“0”则变为“1”，原来为“1”则变为“0”。改动了e.htmlElement.innerHTML中图片名后，相应的任务块中的计划条或实施条也就改变了颜色。

document.getElementById("valueArray").value为鼠标所在行中计划列或实施列的字符串值，当用户点击“微调”、“执行任务”或“结束任务”按钮时取得，保存在客户端hidden标签valueArray中。在鼠标点击事件中，该值中鼠标所点时间段对应的字符也要相应地改为s1的值，临时记录在客户端，点击“更新”按钮时再一起更新到数据库中。

2 结论

本系统基于DevExpress ASPxGridView控件的列模板技术实现，已用于房地产评估项目管理系统中。使用结果表明，这种双线条甘特图可以直观地对比检查计划和实施情况，打破了传统的单线条甘特图的使用方式，表现力更丰富；通过简单点击就可以对每个任务块进行交互操作，克服了以往B/S模式下的甘特图只能看不能交互操作的弊病；根据本文给出的实现方法，可以很容易地采用ASP.NET 中的Gridview中的模板技术实现，或利用其他开发平台中的相关技术实现。

[1] 肖伟,赵嵩正. 基于OLE技术的项目甘特图设计与实现[J]. 微型电脑应用, 2003,19(10):20-22.

[2] 梁海燕,赵嵩正. 基于JSP技术工程项目甘特图的设计与实现[J]. 计算机应用与软件, 2006,23(8):43-44,59.

[3] 夏臻,陈建勋. 基于SVG技术的甘特图绘制组件设计与实现[J]. 计算机工程与设计, 2010,31(10):2354-2357.

[4] 王俊,杨涛. 基于JSP技术的项目甘特图设计与实现[J]. 现代制造工程,2008(2):80-83.

[5] 安思,张菹,叶鑫. 基于AMT算法的时间序列数据在甘特图中的应用[J]. 计算机与数字工程, 2011,39(6):146-149.

[6] 李林静. 基于DataGrid模板列的分析及应用[J].计算机系统应用，2009,18(3):57-61.

Application and implementation of Gantt chart with two bar based on template column technology

Xue Lian, LiJia

(School of Urban and Environmental Sciences, Liaoning Normal University, Dalian 116029 ,China)

This paper put forward a new application of Gantt chart for poor interaction and not easy to contrast plan and implementation with traditional Gantt chart in B/S mode. The Gantt chart is displayed as two bars, the top expresses plan and the bottom expresses implementation. User can adjust plan and record implementation by clicking it. The results of application of the new Gantt chart show that it can contrast the plan and implementation intuitively and can be operated easily. It is based on general technology of column template, so it can be implemented easily.

project schedule management; Gantt chart; column template; DevExpress ASPxGridView

TP393.0

A

1674-7720(2016)04-0091-04

雪连，李家．基于列模板技术的双线条甘特图的应用与实现[J] .微型机与应用，2016，35(4)：91-94.

2015-11-20)

雪连(1990-)，通讯作者，女，硕士研究生，主要研究方向：地理信息系统集成开发。E-mail：1076631594@qq.com。

李家(1957-)，男，本科，副教授，主要研究方向：地理信息系统集成开发。