ASP.NET 漂亮的免费甘特图控件

这是一个WEB下的甘特图控件，控件的体积只有54KB，只有一个DLL文件。

以左右分隔形式显示，左边是图形数据的绑定字段显示，右边是甘特图的线条计划。

这个控件我花费了大概3天的时间完成的，使用方法很简单，设置指定的字段后并DataSource一个DataTabel就可以。控件是以.NET2.0的框架开发，肯定不支持1.1的了，不过我想会向上兼容。

控件支持IE5, IE6, IE7, IE8,FF,Chrome

本控件完全免费使用，包括商业，但是请保留版权(www.51ascx.com)

控件预览：

 

使用说明

 

 

 

 

 

使用方法很简单首先拷贝Gantt.dll到你的项目中并添加到你的VS工具箱中。

 

 

 

 

 

VS2008的添加方法：右键VS的工具箱

 

 

 

然后点击选择项弹出对话框，选择浏览找到Gantt.dll，按确定就可以了

 

添加成功后菜单中会多出一个名为GanttControl的控件，这也就是我们要的甘特图控件

 

 

 

拖动GanttControl到你的页面中，如下图片

 

 

 

在没有运行时会显示51ascx.com 甘特图控件

下面是前台头部代码

XML/HTML Code复制内容到剪贴板

1. <%@ Register Assembly="Gantt" Namespace="Gantt" TagPrefix="cc1" %>  

 

 

 

 

控件前台代码

XML/HTML Code复制内容到剪贴板

1. <cc1:GanttControl ID="GanttControl2" runat="server">  
2.         cc1:GanttControl>  

 

 

我们可以设置控件的标题文字部门，也就是Title属性

 

 

Title="51ascx.com 控件网"

 

 

这样前台的工作就完成了，现在说一下如何绑定数据

绑定数据分两个部分，一是指定字段，二是给一个DataTable就OK

先说一下如何指定字段

 

指定字段有三种方法

方法1：右键控件点击属性，在控件的要属性列表中你会发现有一个名为BoundField的属性组，点开这个属性会有5个属性

如下图

 

分别为TaskName，StartTimePlan，EndTimePlan，PersonCharge，Progress

 5个属性注释：任务名称，开始时间，结束时间，负责人和完成进度

那么为这几个属性设置对应的相关字段名就可以

 

 

 

方法2：

 

第二个方法就是用前台代码指定，我个人比较喜欢用这个方法：

XML/HTML Code复制内容到剪贴板

1. <cc1:GanttControl ID="GanttControl1" runat="server" Title="51ascx.com 控件网">  
2.            <BoundField TaskName="taskNames" StartTimePlan="startTimePlans" EndTimePlan="endTimePlans"  
3.                PersonCharge="personCharges" Progress="progresss">BoundField>  
4.        cc1:GanttControl>  

 

 

 

 

第三个方法就是用后台代码绑定 代码如下：

C# Code复制内容到剪贴板

1. GanttControl1.BoundField.StartTimePlan = "StartTimePlan";  
2.             GanttControl1.BoundField.EndTimePlan = "EndTimePlan";  
3.             GanttControl1.BoundField.Progress = "Progress";  
4.             GanttControl1.BoundField.TaskName = "TaskName";  
5.             GanttControl1.BoundField.PersonCharge = "PersonCharge";  

 

以上是指定字段名称的方法，那不管你用哪一个指定，最后还是要DataSource一下

C# Code复制内容到剪贴板

1. GanttControl1.Width = "800px";  
2.             GanttControl1.Height = "250px";  
3.             GanttControl1.DataSource = dataTable();  

 

dataTable();//这是我的返回DataTable的方法 Width和Height是设置宽和高 OK大功告成了，来运行一下吧，效果图片

 

控件属性列表

Title	头部显示标题
Width	控件的宽度
Height	控件的高度
DataSource	获取或设置对象,数据绑定控件从该对像中检测其对像列表
BoundField
TaskName	设置为任务名称列表项提供值的数据源字段
PersonCharge	设置为负责人列表项提供值的数据源字段
StartTimePlan	设置为计划开始时间列表项提供值的数据源字段
EndTimePlan	设置为计划结束时间列表项提供值的数据源字段
Progress	设置为完成进度列表项提供值的数据源字段

 下载地址：http://www.51ascx.com/203.html