一、簡介
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 = ""; })
});
六、源碼
請去資源內自行下載
五、總結
如有不妥的地方請多指教，寫的不好的地方多有包含，順便希望大家可以點個贊~ 謝謝大家