jQuery.Gantt参数配置中文版说明

2014-10-05 18:18:24来源:landfancy作者:
jQuery.Gantt是一个基于jQuery的甘特图绘制插件,功能强大,操作简单。
jQuery.Gantt是一个基于jQuery的甘特图绘制插件,功能强大,操作简单。 \

Gantt Configuration 甘特图基本配置

$(".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) 数据源:json数组或者返回json的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; }   在空白格子点击时执行的函数
第一个参数是点击点对应时间的毫秒数,第二个参数对象的id
onRender function () { return; }   甘特图渲染完毕后执行的操作
useCookie false   声明是是否使用cookie记录图表的状态(缩放单元、滚动条位置)
需要使用jquery.cookie.js才能使用该选项
scrollToToday true Boolean 是否滚动到当天

Source Configuration 数据源配置格式

source: [{ name: "标题", desc: "描述.", values: [ ... ] }]
参数 默认值 类型 说明
name null String 甘特图左侧显示的每行所对应的标题——体文字部分
desc null String 左侧说明的描述部分
values null Array 甘特图单元所对应的时间段等信息,在右侧的单元格显示

Value Configuration 数据源的json数值对

values: [{ to: "/Date(1328832000000)/", from: "/Date(1333411200000)/", desc: "鼠标悬停时的描述文字", label: "甘特图项目标题", customClass: "ganttRed", dataObj: foo.bar[i] }]
参数 类型 说明
to String (Date) 结束时间(毫秒数,php返回时可以在时间戳后添加3个0)
from String (Date) 开始时间
desc String 鼠标悬停到项目上个的提示文字Text that appears on hover, I think?
label String 甘特图项目的标题文字
customClass String 添加到甘特图项目的自定义类,可以用来标记甘特图项目的颜色
dataObj All 点击时应用到甘特图项目的data对象

赞助商链接:

齐乐娱乐