JQuery.Gantt(甘特图) 开发指南

 

  • 概述
     JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。
 
 
  • 源码下载
     http://download.csdn.net/detail/aaakingwin/5550401
  • 前端页面
    • 资源引用
     首先我们需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引用需要的资源文件。
      • CSS样式文件
<link rel="stylesheet" href="css/style.css" />
      • JS脚本文件
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script src="js/jquery.cookie.js"></script>
     
     注:如果需要甘特图中显示中文,则需要在js文件引用中加上charset特性并设置为GB2312,否则中文内容将显示为乱码。
    • 页面布局
     在需要显示甘特图的地方加入以下这个div。
<div class="gantt"></div>
  • 组件配置
    • Gantt 配置
$(".selector").gantt({
        source:"ajax/data.json",
        scale:"weeks",
        minScale:"weeks",
        maxScale:"months",
        onItemClick:function(data){
                alert("Item clicked - show some details");},
        onAddClick:function(dt, rowId){
                alert("Empty space clicked - add an item!");},
        onRender:function(){
                console.log("chart rendered");}});
参数默认值接收类型
source null Array, String (url)
itemsPerPage 7 Number
months ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] Array
dow ["S", "M", "T", "W", "T", "F", "S"] Array
navigate "buttons" String ("buttons","scroll")
scale "days" String
maxScale "months" String
minScale "hours" String
waitText "Please Wait..." String
onItemClick: function (data) { return; } 有数据范围内的点击事件
onAddClick function (dt, rowId) { return; } 无数据范围内的点击事件
onRender function () { return; } 渲染事件
useCookie false 如果需要使用cookie则需要引用JS脚本文件:
jquery.cookie.js 
scrollToToday true Boolean
    • Source 配置
source:[{
        name:"Example",
        desc:"Lorem ipsum dolor sit amet.",
        values:[...]}]
参数默认值接收类型解释
name null String 每一行最左侧的一列以粗体显示
desc null String 每一行左侧第二列
values null Array 甘特图日期范围项
    • Value 配置
values:[{
        to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
        desc:"Something",
        label:"Example Value",
        customClass:"ganttRed",
        dataObj: foo.bar[i]}]
参数接收类型解释
to String (Date) 结束时间,以毫秒为换算单位
from String (Date) 开始时间,以毫秒为换算单位
desc String 鼠标悬停显示文本
label String 甘特项显示文本
customClass String 甘特项的自定义class
dataObj All 一个直接应用于甘特项的数据对象
 
注:其中from和to的时间为毫秒数,例如:/Date(1320192000000)/,计算方式为时间变量减去时间初始值(1970-1-1)的差值换算为毫秒
  •  .NET平台实现时间转换
  public class GanttManager
    {
        public static readonly DateTime StartTime = TimeZone .CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)).Date;
 
        public static List< GanttItem> DataToGanttList()
        {
            List<GanttItem > ls = new List<GanttItem >();
 
            GanttItem item = new GanttItem();
            item.name = "a";
            item.desc = "b";
            item.values.id = "1";
            item.values.label = "c";
            item.values.from = ToMillisecondDate( new DateTime (2011, 11, 2));
            item.values.to = ToMillisecondDate( new DateTime (2011, 11, 3));
 
            ls.Add(item);
            ls.Add(item);
 
            return ls;
        }
 
        public static string ToMillisecondDate( DateTime dt)
        {
            return "/Date(" + ((dt.Date - StartTime.Date).TotalSeconds * 1000).ToString() + ")/";
        }
    }
  • 代码说明
    • jquery.cookie.js
     用于cookie管理,如果需要在甘特图中使用cookie则需要在页面中引用该js文件,否则不需要引用。
    • jquery.fn.gantt.js
     JQuery.Gantt组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。
     代码结构解析:
  • $.fn.gantt = function (options):甘特图部件对象
    • 基础属性
      • cookieKey:cookie的键
      • scales:时间范围的级别
      • settings:部件设置集
        • source:数据源
        • itemsPerPage:分页的每页数据行数
        • months:列头处月份名称
        • dow:列头处星期名称
        • startPos:默认开始位置日期
        • navigate:底部导航,buttons为按钮式的,scroll为滑块式的
        • scale:甘特图每一列的时间范围
        • useCookie:是否使用cookie,如果使用需要引用jquery.cookie.js
        • maxScale:最大时间范围
        • minScale:最小时间范围
        • waitText:等待提示文本
        • onItemClick:有数据范围内点击事件
        • onAddClick:无数据范围内点击事件
        • onRender:渲染事件
        • scrollToToday:设置是否滚动到今天
    • 自定义选择器方法(a:元素,i:索引,m:值): $.extend($.expr[":"], {});
      • findday:以毫秒为时间单位匹配一个指定的日期
      • findweek:以毫秒为时间单位匹配一个指定的周
      • findmonth:以毫秒为时间单位匹配一个指定的月
    • 日期对象扩展方法
      • Date.prototype.getWeekId:获取weekid用于标识week的div的id特性,返回字符串,格式为dh-YYYY-WW,其中的ww是一年中的第几周
      • Date.prototype.genRepDate:按部件设置属性中scale的值获取时间范围,以秒为时间单位
      • Date.prototype.getDayOfYear:获取日期在一年中的第几天
      • Date.prototype.getWeekOfYear:获取日期在一年中的第几周
      • Date.prototype.getDaysInMonth:获取日期所在月份的天数
      • Date.prototype.hasWeek:如果日期驻留在一周的边界,返回真
      • Date.prototype.getDayForWeek:返回一周的开始日期的日期对象
    • Grid管理器(负责导航和渲染):core
      • elementFromPoint:获取位于指定点的最高处的元素
      • create:创建图表
      • init:初始化视图,计算行数、页数、可见的开始时间与结束时间
      • render:渲染grid
      • leftPanel:创建左侧Panel
      • dataPanel:创建右侧数据Panel
      • rightPanel:创建右侧头部Panel
      • navigation:导航
      • createProgressBar:创建进度条
      • markNow:移除”wd“class添加”today“class到当前的scale模式
      • fillData:填充图表,解析数据并填充到panel
      • navigateTo:导航到
      • navigatePage:导航到指定的页面
      • zoomInOut:变更空间轴级次(zoom)
      • mouseScroll:通过鼠标移动图表
      • wheelScroll:通过鼠标滚轮移动图表
      • sliderScroll:通过滑块控制图表
      • scrollPanel:更新滚动panel的margin
      • synchronizeScroller:同步滚动
      • repositionLabel:重新定位数据标签
      • waitToggle:切换等待
    • 实用工具类功能:tools
      • getMaxDate:返回最大可能的日期在scale值的标准下
      • getMinDate:返回最小可能的日期在scale值的标准下
      • parseDateRange:返回一个日期对象数组介于from和to之间,时间单位为天
      • parseTimeRange:返回一个日期对象数组介于from和to之间,时间单位为小时
      • parseWeeksRange:返回一个日期对象数组介于from和to,时间单位为周
      • parseMonthsRange:返回一个日期对象数组介于from和to,时间单位为月
      • dateDeserialize:从字符串反序列化成日期
      • genId:用日期创建ID
      • getCellSize:获取当前单元格的大小
      • getRightPanelSize:获取当前右panel的大小
      • getPageHeight:获取当前页面的高度
      • getProgressBarMargin:获取当前进度条的margin大小
    • 甘特图组件对象遍历器(负责执行初始化操作):this.each(function () {};);
posted @ 2013-06-09 15:36  M守护神  阅读(13822)  评论(6编辑  收藏  举报