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

最新推荐文章于 2024-08-24 08:19:05 发布

zhanghe100

最新推荐文章于 2024-08-24 08:19:05 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： asp.net server ie 任务 chrome c#

本文链接：https://blog.youkuaiyun.com/zhanghe100/article/details/6246563

介绍一款仅54KB大小的甘特图控件，适用于.NET2.0框架，支持多种浏览器，并提供详细使用教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个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复制内容到剪贴板

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

控件前台代码

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

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

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

Title="51ascx.com 控件网"

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

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

先说一下如何指定字段

指定字段有三种方法

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

如下图

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

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

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

方法2：

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

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

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

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

C# Code复制内容到剪贴板

GanttControl1.BoundField.StartTimePlan = "StartTimePlan";
GanttControl1.BoundField.EndTimePlan = "EndTimePlan";
GanttControl1.BoundField.Progress = "Progress";
GanttControl1.BoundField.TaskName = "TaskName";
GanttControl1.BoundField.PersonCharge = "PersonCharge";

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

C# Code复制内容到剪贴板

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

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

控件属性列表

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

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