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

上个版本中,有网友"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

posted @ 2011-04-19 16:09  小眼睛Smile  阅读(1166)  评论(4编辑  收藏  举报