一、简介
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 = ""; })
});
六、源码
请去资源内自行下载
五、总结
如有不妥的地方请多指教，写的不好的地方多有包含，顺便希望大家可以点个赞~ 谢谢大家