一、简介

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。

二、JQuery.Gantt

开源的有2个，他们都叫JQuery.Gantt
这两个在名字上有细微的区别，功能却是大不一样的，可以根据所需功能自行选择
【不想自己下载看的，我在下面有截图展示】

（1）jQuery Gantt Chart
下载网址：https://github.com/taitems/jQuery.Gantt（2）jQuery Gantt editor
原版下载网址：https://github.com/robicch/jQueryGantt
文档说明：https://roberto.twproject.com/2012/08/24/jquery-gantt-editor/

（1）jQuery Gantt Chart展示

（2）jQuery Gantt editor展示

三、使用

我使用到的是第二个：jQuery Gantt editor
注意：这里的有些功能结合网上各位大神的总结以及教程做了修改，所以跟原版的甘特图稍有差别

四、功能改写

注意：也可下载原版对比着看、这里仅展示了部分
1、将弹出层改为中文显示

解释：打开页面开始均为英文，需要在gantt.html内将TASK_EDITOR内对应的字段改成中文即可，不需要哪些字段删掉即可

2、table表头动态拖动可改变列宽、刷新后恢复初始设置值

解释：修改ganttUtilities.js文件
修改后的代码：

  //table表头动态拖动可改变列宽head.find("th.gdfColHeader.gdfResizable:not(.gdfied)").mouseover(function () {$(this).addClass("gdfColHeaderOver");}).bind("mouseout.gdf", function () {$(this).removeClass("gdfColHeaderOver");if (!$.gridify.columInResize) {$("body").removeClass("gdfHResizing");}}).bind("mousemove.gdf", function (e) {if (!$.gridify.columInResize) {var colHeader = $(this);var mousePos = e.pageX - colHeader.offset().left;if (colHeader.width() - mousePos < options.resizeZoneWidth) {$("body").addClass("gdfHResizing");} else {$("body").removeClass("gdfHResizing");}}}).bind("mousedown.gdf", function (e) {var colHeader = $(this);var mousePos = e.pageX - colHeader.offset().left;if (colHeader.width() - mousePos < options.resizeZoneWidth) {$("body").unselectable();$.gridify.columInResize = $(this);$(document).bind("mousemove.gdf", function (e) {//调整宽度时导致表头表体宽度不一致，修改为以下设置宽度方式var newWidth = (e.pageX - $.gridify.columInResize.offset().left)<5?5:(e.pageX - $.gridify.columInResize.offset().left)$.gridify.columInResize.width(newWidth);$.gridify.columInResize.data("fTh").width(newWidth);}).bind("mouseup.gdf", function () {$(this).unbind("mousemove.gdf").unbind("mouseup.gdf").clearUnselectable();$("body").removeClass("gdfHResizing");delete $.gridify.columInResize;});}}).bind("dblclick.gdf", function () {var col = $(this);if (!col.is(".gdfResizable"))return;var idx = $("th", col.parents("table")).index(col);var columnTd = $("td:nth-child(" + (idx + 1) + ")", table);var w = 0;columnTd.each(function () {var td = $(this);var content = td.children("input").length ? td.children("input").val() : td.html();var tmp = $("<div/>").addClass("columnWidthTest").html(content).css({position: "absolute"});$("body").append(tmp);w = Math.max(w, tmp.width() + parseFloat(td.css("padding-left")));tmp.remove();});w = w + 5;col.width(w);col.data("fTh").width(w);storeGridState();return false;}).addClass("gdfied unselectable").attr("unselectable", "true");function storeGridState() {if (localStorage) {var gridState = {};var colSizes = [];$(".gdfTable .gdfColHeader").each(function () {colSizes.push($(this).outerWidth());});gridState.colSizes = colSizes;localStorage.setObject("TWPGanttGridState", gridState);}}// 刷新页面恢复初始样式table.find("td.gdfCell:not(.gdfied)").each(function () {var cell = $(this);if (cell.is(".gdfEditable")) {// var inp = $("<input type='text'>").addClass("gdfCellInput");inp.val(cell.text());cell.empty().append(inp);} else {var wrp = $("<div>").addClass("gdfCellWrap");wrp.html(cell.html());cell.empty().append(wrp);}}).addClass("gdfied");return box;

3、滚动页面-保持两边滚动一致
解释：修改ganttUtilities.js文件
修改后的代码：

// 页面滚动-滚动时保持两边一致var stopScroll = false;var fs = firstBox.add(secondBox);fs.scroll(function (e) {var el = $(this); //右页面var top = el.scrollTop(); //右边滚动距离顶部的距离if (el.is(".splitBox1") && stopScroll != "splitBox2") {stopScroll = "splitBox1";secondBox.scrollTop(top); //右} else if (el.is(".splitBox2") && stopScroll != "splitBox1") {stopScroll = "splitBox2";firstBox.scrollTop(top); //左}// 表头固定secondBox.find(".ganttFixHead").css('top', top);firstBox.find(".ganttFixHead").css("top" , top);where.stopTime("reset").oneTime(100, "reset", function () { stopScroll = ""; })});

五、总结

如有不妥的地方请多指教，写的不好的地方多有包含，顺便希望大家可以点个赞~ 谢谢大家。

jquery gantt 甘特图相关推荐

Silverlight Gantt甘特图项目管理解决方案
2019独角兽企业重金招聘Python工程师标准>>> Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. ...
动态修改 DHTML Gantt甘特图皮肤样式
初始化一个DHTML Gantt甘特图的皮肤默认为Teracce Skin 现在项目有一个需求通过按钮动态修改甘特图主题(皮肤),在官网提供的API不难发现修改样式办法.说到底,只是改变CSS样式文件 ...
Gantt(甘特图)与PERT(项目计划评审技术)图各自的缺陷
文章目录 1 Gantt(甘特图) 2 PERT(项目计划评审技术)图 3 考题 1 Gantt(甘特图) 甘特图,也称为条状图(Bar chart).是在1917年由亨利·甘特开发的,其内在思想简单 ...
highcharts中gantt甘特图的使用
示例图: 官方文档参考:highcharts gantt 甘特图示例使用示例: <template><div id="container"></di ...
gantt(甘特)图
gantt图又叫甘特图. 进度是按时间顺序计划活动的一个列表,我们称之为Gantt图,它有以下几个关键的成分: 1.横跨图顶部排列的是日历表. 2.最左边的一列包含了每项任务的标识号(ID). 3.左 ...
echarts gantt甘特图示例
甘特图(Gantt chart)又称为横道图.条状图(Bar chart).其通过条状图来显示项目.进度和其他时间相关的系统进展的内在关系随着时间进展的情况.以提出者亨利·劳伦斯·甘特(Henry L ...
Gantt(甘特图)与PERT(项目计划评审技术)图，项目关键路径和松弛时间
甘特图也叫做进度管理图. 他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个线条表示一个任务,任务名称垂直的列在左边列中,图中的线条的起点和终点对应水平轴上的时间,分别 ...
Gantt(甘特图)与PERT(项目计划评审技术)图
在软考考试题中,甘特图和PERT图经常出现.两者无外乎就是针对考生对两者的概念理解是否准确. 甘特图也就做进度管理图.他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个 ...
DHTMLX Gantt 甘特图使用
dhtmlxGantt 在vue中使用样例,实现了自定义弹窗.设置横道图颜色.修改列表样式.表单验证等. 效果: 官网样例:https://docs.dhtmlx.com/gantt/samples/ ...

jquery gantt 甘特图

jquery gantt使用