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

时间：2011-04-19 来源：小眼睛Smile

上个版本中，有网友"gz518"提出增加自定义字段功能，所以这几天改了一下，那使用方法也有所变化

这里我主要说一下使用方法

简介

这是一个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，按确定就可以了

添加成功后会在VS工具箱中会多出二控件

如下图

拖动GanttControl到你的页面中，另一个你不用去管，是我绑定数据用的，代码如下

<cc1:GanttControl ID="GanttControl1" runat="server"> cc1:GanttControl>

在以上代码你可以设置空间的Title和宽高属性

下面我说一下绑定数据，注意绑定数据有5个必须字段，因为我要根据这5个字段来计算

先看下我的DEMO代码，看代码讲解会更好一些

<cc1:GanttControl ID="GanttControl1" Title="51ascx.com 甘特图" runat="server">  
        <BoundField>  
               <cc1:DataBindingItem ID="DataBindingItem7" runat="server" DataField="id"   
                   HeaderText="标识">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem6" runat="server" DataField="zdy"   
                   HeaderText="自定义">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem8" runat="server" BindingMode="任务名称"   
                   DataField="taskNames" HeaderText="任务名称">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem9" runat="server" BindingMode="开始时间"   
                   DataField="startTimePlans" HeaderText="计划时间">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem10" runat="server" BindingMode="结束时间"   
                   DataField="endTimePlans" HeaderText="完成时间">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem11" runat="server" BindingMode="完成进度"   
                   DataField="progresss" HeaderText="进度">  
               cc1:DataBindingItem>  
               <cc1:DataBindingItem ID="DataBindingItem12" runat="server" BindingMode="负责人"   
                   DataField="personCharges" HeaderText="负责人">  
               cc1:DataBindingItem>  
           BoundField>  
       cc1:GanttControl>

上面代码中可以看到，绑定要在BoundField模板中绑定，一个DataBindingItem节点代表一个字段

前两个是我自定义的，后5个是必须字段

DataField是自定数据库的字段

HeaderText是页眉

这里重点说一下BindingMode属性，可以看到BindingMode有6个类型，绑定的时后我们要把这6个类型中除“自定义”外都要正确指定字段，不然我没办法找到数据

BindingMode属性：

类型我用的是中文，因为我是中国人：）

自定就类型的就可以是你自己加的了，随便想指定什么字段都可以

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

GanttControl1.Width = "1000px";  
GanttControl1.Height = "250px";  
GanttControl1.DataSource = dataTable();

效果图片如下

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