jQuery甘特图/日程图/横道图/插件
基于JQ的一款灵活高效,支持自定义拓展的甘特图/日程图插件
支持月/周/小时等显示方式 支持拖动改变时间 展开与收起 添加/删除,刷新 节假日高亮 clicked,dblClicked,changed事件 ...





调用方式:
$("#ganttChart").ganttView({
ganttScale: "hours",// months weeks days hours
showWeekends: true, //是否现在周末高亮
showLine: true,//是否显示 当前时间线(为"周"时显示背景颜色)
data: ganttData2, //数据来源
vtHeaderWidth: 300,//左侧任务模块宽度
cellWidth: 50, //格子宽度(ganttScale = hours/weeks:宽度重新计算 最小为50)
cellHeight: 40,//格子行高
titileHeight: 40,//标题行高
start: new Date(2019, 06, 14), //范围最小时间(请根据 ganttScale 参数调节初始时间范围)
end: new Date(2019, 06, 20), //范围最大时间
slideWidth: '100%',//甘特图宽度
excludeWeekends: true,//排除星期的最后一天
showDayOfWeek: true,//是否显示星期
showHolidays: false,//显示节假日
excludeHolidays: false,//排除节假日
gridHoverL:true,//是否显示鼠标移入效果(列)
gridHoverH:true,//是否显示鼠标移入效果(行)
isUnfold:true,//模块下任务超过2条 显示展开收起按钮
unfoldConfig:false,//初始化展开/收起(模块下任务超过2条 显示展开收起按钮) true:收起
clicked: function (o) {
selectedObj = o;
var data = selectedObj.data('block-data');
var itemName = data.itemName ? data.itemName : "";
var seriesName = data.seriesName ? data.seriesName : "";
var text = data.text ? data.text : "";
var sYYYY = data.start.getYear();
sYYYY = sYYYY < 1000 ? sYYYY + 1900 : sYYYY;
var sMM = data.start.getMonth() + 1;
var sDD = data.start.getDate();
var eYYYY = data.end.getYear();
eYYYY = eYYYY < 1000 ? eYYYY + 1900 : eYYYY;
var eMM = data.end.getMonth() + 1;
var eDD = data.end.getDate();
$('#ganttData-item-id').val(data.itemId);
$('#ganttData-item-name').val(itemName);
$('#ganttData-series-id').val(data.seriesId);
$('#ganttData-series-name').val(seriesName);
$('#ganttData-series-start').val(sYYYY + "/" + sMM + "/" + sDD);
$('#ganttData-series-end').val(eYYYY + "/" + eMM + "/" + eDD);
$('#ganttData-series-text').val(text);
console.log(`${data.itemId} ${itemName} ${data.seriesId} ${seriesName} ${sYYYY + "/" + sMM + "/" + sDD} ${eYYYY + "/" + eMM + "/" + eDD}`)
},
dblClicked: function (o) {
if (selectedObj == null) { return; }
if (selectedObj.data('block-data').seriesId == o.data('block-data').seriesId) {
$('#ganttData-reset').trigger("click");
}
},
changed: function (o) {
o.trigger("click");
}
});
插件地址:https://github.com/WalkerHJ/GanttView
注意事项:
- 支持月,周,小时
- 选择月时,注意调整start/end时间(时间月份默认从0开始)
- 选择周/小时,插件自动忽略年份与月份
- 插件支持模块下任务超过2条数据自动显示展开/收起按钮
- 插件支持节假日Holidays表格高亮,excludeHolidays:true
- cellWidth表格宽度(ganttScale = hours/weeks:宽度重新计算 最小为50) 避免未撑满整个屏幕
- showLine是否显示当前时间节点(小时为线条展示,周/月为表格高亮)
- 关于版本问题(jquery-ui-1.8.2/jquery-1.4.2)JQ版本可为高版本,JQ-ui版本暂不支持高版本
- 图表上所有样式可自定义或取消
jQuery甘特图/日程图/横道图/插件的更多相关文章
- 简单横道图Demo
代码(每个月都显示整月): @{ ViewBag.Title = "横道图"; Layout = "~/Views/Shared/_Layout.cshtml" ...
- 如何利用office绘制施工进度计划横道图?
在Excel中利用“悬浮的条形图”可以制作简单的横道图.Step1 启动Excel,仿照图1的格式,制作一份表格,并将有关工序名称.开(完)工时间和工程持续时间等数据填入表格中. A1单元格中请不要输 ...
- EXCEL 2007施工进度横道图制作步骤及实战练习
[知识讲解] 1.将图表中的部分图形“隐藏”起来 如果为了实现某种特殊的图表效果,需要将图表中的部分图形“隐藏”起来,除了将该系列删除外(有时候这种方法不能达到所需要的效果),还可以通过下面的方法来实 ...
- jquery 甘特图开发指南
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. <link rel="stylesheet" href="cs ...
- jquery甘特图免费下载
Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 ...
- jquery特效(5)—轮播图③(鼠标悬浮停止轮播)
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
- jquery特效(4)—轮播图②(定时自动轮播)
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图
Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...
随机推荐
- Gradle添加外部项目代码
为了测试一些功能,我想在公司的项目中引进外部项目的子模块代码进来调试,试验了好半天终于成功了... 原来不需要导入代码,只要在settings.gradle中这样就好了: 然后就可以和原项目中的代码一 ...
- Ruby元编程:动态添加类属性及其实际应用
上个星期测试道的Monkey老师和我聊到测试用例参数过多的问题,其实这样的问题在我这里也同样经历过.比如我的测试用例必须面对不同的测试环境,每个环境有无数的参数,开发的最初阶段,因为参数少,所以就放在 ...
- Spring Schema扩展机制
1:概述 Spring2.0开始,Spring提供XML Schema可扩展机制,用户可以自定义XML Schema文件,并自定义 XML Bean解析器,集成到Spring IOC容器中. 2:步骤 ...
- 仿写confirm和alert弹框
在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭.于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改. 有些的不好的地方请指出来 ...
- Docker环境下的前后端分离项目部署与运维(十一)Docker Swarm技术
Docker Swarm技术 docker swarm技术(之前的docker集群都是在 一个虚拟主机上的,但是如果这个主机挂掉了over了,docker技术就是多个虚拟主机形成一个集群) Swarm ...
- 用nodejs调用webservice
用nodejs调用webservice,是用soap包实现的. 步骤如下: 第一步:安装soap包 npm install soap 第二部:调用webservice var soap = requ ...
- Maven版本管理-Maven Release Plugin插件
一.什么是版本管理 首先,这里说的版本管理(version management)不是指版本控制(version control),但是本文假设你拥有基本的版本控制的知识,了解subversion的基 ...
- 前端页面统计beacon调研
目录 为什么使用beacon beacon特性 beacon 示例 参考资料 主要用于测试html的新特性beacon,使用beacon向后端发送请求,代替xhr或jsonp, 好处是支持页面unlo ...
- Ruby中的各种比较方式对比
Ruby中设计了很多种比较方式,所有对象都能进行==.!=.===.<=>.eql?.equal?这几种比较.此外,当实现了<=>之后,如果还include了Comparabl ...
- AD域控制器安装使用
AD域控制器安装使用 一. 在服务器上安装域控制器 二. 将此服务器提升为域控制器 三. 将主机加入到我们创建的域中 在AD域控制器上查看加入的主机