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();
效果图片如下