基于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甘特图/日程图/横道图/插件的更多相关文章

  1. 简单横道图Demo

    代码(每个月都显示整月): @{ ViewBag.Title = "横道图"; Layout = "~/Views/Shared/_Layout.cshtml" ...

  2. 如何利用office绘制施工进度计划横道图?

    在Excel中利用“悬浮的条形图”可以制作简单的横道图.Step1 启动Excel,仿照图1的格式,制作一份表格,并将有关工序名称.开(完)工时间和工程持续时间等数据填入表格中. A1单元格中请不要输 ...

  3. EXCEL 2007施工进度横道图制作步骤及实战练习

    [知识讲解] 1.将图表中的部分图形“隐藏”起来 如果为了实现某种特殊的图表效果,需要将图表中的部分图形“隐藏”起来,除了将该系列删除外(有时候这种方法不能达到所需要的效果),还可以通过下面的方法来实 ...

  4. jquery 甘特图开发指南

    JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. <link rel="stylesheet" href="cs ...

  5. jquery甘特图免费下载

    Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 ...

  6. jquery特效(5)—轮播图③(鼠标悬浮停止轮播)

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  7. jquery特效(4)—轮播图②(定时自动轮播)

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  8. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  9. Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图

    Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...

随机推荐

  1. 用vs2010编译好的ICU库

    1.ICU库的官网网址为http://site.icu-project.org/ 2.ICU(International Components for Unicode)是一个国际化的字符编码和转化的库 ...

  2. QT在linux环境下读取和设置系统时间(通过system来直接调用Linux命令,注意权限问题)

    QT在Linux环境下读取和设置系统时间 本文博客链接:http://blog.csdn.NET/jdh99,作者:jdh,转载请注明. 环境: 主机:Fedora12 开发软件:QT 读取系统时间 ...

  3. 用Golang让自己的电脑自动登录“上网管理”系统

    用Golang让自己的电脑自动登录 1.缘起 大天朝的网络一般都是只对某些人开放的.上行下效,同样的措施也作用在我们的教育网上.我想不出来,为什么很多领导的总有这样的恶趣味(如果做的到,他们恨不得监控 ...

  4. Codility--- Triangle

    Task description A zero-indexed array A consisting of N integers is given. A triplet (P, Q, R) is tr ...

  5. 【spring boot】application.properties官方完整文档

    官方地址: https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ 进入搜索: Appendice ...

  6. python中的命名空间以及函数的嵌套

    一.动态传参 函数的形参中除了默认值参数和位置参数外,还有动态传参.当不确定形参有几个或者有很多的时候,就可以使用动态传参. 1.1 动态接收位置参数 在python中使用*来接收动态位置参数 def ...

  7. Django学习笔记(20)——BBS+Blog项目开发(4)Django如何使用Bootstrap

    本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...

  8. kubernetes client-go解析

    注:本次使用的client-go版本为:client-go 11.0,主要参考CSDN上的深入浅出kubernetes之client-go系列,建议看本文前先参考该文档.本文档为CSDN文档的深挖和补 ...

  9. java泛型的作用及其基本概念

    一.泛型的基本概念 java与c#一样,都存在泛型的概念,及类型的参数化.java中的泛型是在jdk5.0后出现的,但是java中的泛型与C#中的泛型是有本质区别的,首先从集合类型上来说,java 中 ...

  10. python算法与数据结构-数据结构中常用树的介绍(45)

    一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...