📄 jsgantt.js
字号:
'<div id=taskbar_' + vID + ' title="' + vTaskList[i].getName() + ': ' + vDateRowStr + '" style="height: 16px; width:12px; overflow:hidden; cursor: pointer;" onclick=JSGantt.taskLink("' + vTaskList[i].getLink() + '");>';
if(vTaskList[i].getCompVal() < 100)
vRightTable += '◊</div></div>' ;
else
vRightTable += '♦</div></div>' ;
} else {
// Build date string for Title
vStr = vTaskStart.getFullYear() + '';
vStr = vStr.substring(2,4);
vDateRowStr = vTaskStart.getMonth() + '/' + vTaskStart.getDate() + '/' + vStr;
vStr = vTaskEnd.getFullYear() + '';
vStr = vStr.substring(2,4);
vDateRowStr += ' - ' + vTaskEnd.getMonth() + '/' + vTaskEnd.getDate() + '/' + vStr;
vTaskLeft = (Date.parse(vTaskList[i].getStart()) - Date.parse(vMinDate)) / (24 * 60 * 60 * 1000);
vTaskRight = (Date.parse(vTaskList[i].getEnd()) - Date.parse(vTaskList[i].getStart())) / (24 * 60 * 60 * 1000) + 1/vColUnit;
// Draw Group Bar which has outer div with inner group div and several small divs to left and right to create angled-end indicators
if( vTaskList[i].getGroup()) {
vRightTable +=
'<div id=bardiv_' + vID + ' style="position:absolute; top:5px; left:' + Math.ceil(vTaskLeft * (vDayWidth) + 1) + 'px; height: 7px; width:' + Math.ceil((vTaskRight) * (vDayWidth) - 1) + 'px">' +
'<div id=taskbar_' + vID + ' title="' + vTaskList[i].getName() + ': ' + vDateRowStr + '" class=gtask style="background-color:#000000; height: 7px; width:' + Math.ceil((vTaskRight) * (vDayWidth) -1) + 'px; cursor: pointer;">' +
'<div style="Z-INDEX: -4; float:left; background-color:#666666; height:3px; overflow: hidden; margin-top:1px; ' +
'margin-left:1px; margin-right:1px; filter: alpha(opacity=80); opacity:0.8; width:' + vTaskList[i].getCompStr() + '; ' +
'cursor: pointer;" onclick=JSGantt.taskLink("' + vTaskList[i].getLink() + '");></div></div>' +
'<div style="Z-INDEX: -4; float:left; background-color:#000000; height:4px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:right; background-color:#000000; height:4px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:left; background-color:#000000; height:3px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:right; background-color:#000000; height:3px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:left; background-color:#000000; height:2px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:right; background-color:#000000; height:2px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:left; background-color:#000000; height:1px; overflow: hidden; width:1px;"></div>' +
'<div style="Z-INDEX: -4; float:right; background-color:#000000; height:1px; overflow: hidden; width:1px;"></div>' +
'</div>' ;
} else {
// Draw Task Bar which has outer DIV with enclosed colored bar div, and opaque completion div
vRightTable +=
'<div id=bardiv_' + vID + ' style="position:absolute; top:4px; left:' + Math.ceil(vTaskLeft * (vDayWidth) + 1) + 'px; width:' + Math.ceil((vTaskRight) * (vDayWidth) - 1) + 'px">' +
'<div id=taskbar_' + vID + ' title="' + vTaskList[i].getName() + ': ' + vDateRowStr + '" class=gtask style="background-color:' + vTaskList[i].getColor() +'; height: 13px; width:' + Math.ceil((vTaskRight) * (vDayWidth) - 1) + 'px; cursor: pointer;" ' +
'onclick=JSGantt.taskLink("' + vTaskList[i].getLink() + '");>' +
'<div class=gcomplete style="Z-INDEX: -4; float:left; background-color:black; height:5px; overflow: auto; margin-top:4px; filter: alpha(opacity=40); opacity:0.4; width:' + vTaskList[i].getCompStr() + '; overflow:hidden"></div></div></div>' ;
}
}
vRightTable += '</DIV>';
}
vMainTable += vRightTable + '</DIV></TD></TR></TBODY></TABLE></BODY></HTML>';
vDiv.innerHTML = vMainTable;
}
}
}
// Recursively process task tree ... set min, max dates of parent tasks and identfy task level.
JSGantt.processRows = function(pList, pID, pRow, pLevel)
{
var vMinDate = new Date();
var vMaxDate = new Date();
var vMinSet = 0;
var vMaxSet = 0;
var vList = pList;
var vLevel = pLevel;
var i = 0;
var vNumKid = 0;
var vCompSum = 0;
for(i = 0; i < pList.length; i++)
{
if(pList[i].getParent() == pID) {
pList[i].setLevel(vLevel);
vNumKid++;
if(pList[i].getGroup() == 1) {
JSGantt.processRows(vList, pList[i].getID(), i, vLevel+1);
}
if( vMinSet==0 || pList[i].getStart() < vMinDate) {
vMinDate = pList[i].getStart();
vMinSet = 1;
}
if( vMaxSet==0 || pList[i].getEnd() > vMaxDate) {
vMaxDate = pList[i].getEnd();
vMaxSet = 1;
}
vCompSum += pList[i].getCompVal();
}
}
if(pRow >= 0) {
pList[pRow].setStart(vMinDate);
pList[pRow].setEnd(vMaxDate);
pList[pRow].setNumKid(vNumKid);
pList[pRow].setCompVal(Math.ceil(vCompSum/vNumKid));
}
}
// Used to determine the minimum date of all tasks and set lower bound based on format
JSGantt.getMinDate = function getMinDate(pList, pFormat)
{
var vDate = new Date();
vDate.setFullYear(pList[0].getStart().getFullYear(), pList[0].getStart().getMonth(), pList[0].getStart().getDate());
// Parse all Task End dates to find min
for(i = 0; i < pList.length; i++)
{
if(Date.parse(pList[i].getStart()) < Date.parse(vDate))
vDate.setFullYear(pList[i].getStart().getFullYear(), pList[i].getStart().getMonth(), pList[i].getStart().getDate());
}
// Adjust min date to specific format boundaries (first of week or first of month)
if (pFormat=='day')
{
vDate.setDate(vDate.getDate() - 4);
while(vDate.getDay() % 6 > 0)
{
vDate.setDate(vDate.getDate() - 1);
}
}
if (pFormat=='week')
{
vDate.setDate(vDate.getDate() - 7);
while(vDate.getDay() % 6 > 0)
{
vDate.setDate(vDate.getDate() - 1);
}
}
if (pFormat=='month')
{
while(vDate.getDate() > 1)
{
vDate.setDate(vDate.getDate() - 1);
}
}
return(vDate);
}
// Used to determine the minimum date of all tasks and set lower bound based on format
JSGantt.getMaxDate= function (pList, pFormat)
{
var vDate = new Date();
vDate.setFullYear(pList[0].getEnd().getFullYear(), pList[0].getEnd().getMonth(), pList[0].getEnd().getDate());
// Parse all Task End dates to find max
for(i = 0; i < pList.length; i++)
{
if(Date.parse(pList[i].getEnd()) > Date.parse(vDate))
vDate.setFullYear(pList[i].getEnd().getFullYear(), pList[i].getEnd().getMonth(), pList[i].getEnd().getDate());
}
// Adjust max date to specific format boundaries (end of week or end of month)
if (pFormat=='day')
{
vDate.setDate(vDate.getDate() + 1);
while(vDate.getDay() % 6 > 0)
{
vDate.setDate(vDate.getDate() + 1);
}
}
if (pFormat=='week')
{
//For weeks, what is the last logical boundary?
vDate.setDate(vDate.getDate() + 11);
while(vDate.getDay() % 6 > 0)
{
vDate.setDate(vDate.getDate() + 1);
}
}
// Set to last day of current Month
if (pFormat=='month')
{
while(vDate.getDay() > 1)
{
vDate.setDate(vDate.getDate() + 1);
}
vDate.setDate(vDate.getDate() - 1);
}
return(vDate);
}
// This function finds the document id of the specified object
JSGantt.findObj = function (theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length){
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = JSGantt.findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
JSGantt.changeFormat = function(pFormat,ganttObj) {
if(ganttObj)
{
ganttObj.setFormat(pFormat);
ganttObj.DrawDependencies();
}
else alert('Chart undefined');
}
// Function to open/close and hide/show children of specified task
JSGantt.folder= function (pID,ganttObj) {
var vList = ganttObj.getList();
for(i = 0; i < vList.length; i++)
{
if(vList[i].getID() == pID) {
if (JSGantt.isIE()) { // IE;
if( JSGantt.findObj('group_'+pID).innerText == ' v') {
JSGantt.hide(pID,ganttObj);
JSGantt.findObj('group_'+pID).innerText = '>';
} else {
JSGantt.show(pID, 1,ganttObj);
JSGantt.findObj('group_'+pID).innerText = ' v';
}
} else {
if( JSGantt.findObj('group_'+pID).textContent == 'v') {
JSGantt.hide(pID,ganttObj);
JSGantt.findObj('group_'+pID).textContent = '>';
} else {
JSGantt.show(pID, 1,ganttObj);
JSGantt.findObj('group_'+pID).textContent = 'v';
}
}
}
}
}
JSGantt.hide= function (pID,ganttObj) {
var vList = ganttObj.getList();
var vID = 0;
for(i = 0; i < vList.length; i++)
{
if(vList[i].getParent() == pID) {
vID = vList[i].getID();
JSGantt.findObj('child_' + vID).style.display = "none";
JSGantt.findObj('childgrid_' + vID).style.display = "none";
if(vList[i].getGroup() == 1)
JSGantt.hide(vID,ganttObj);
}
}
}
// Function to show children of specified task
JSGantt.show = function (pID, pTop,ganttObj) {
var vList = ganttObj.getList();
var vID = 0;
for(i = 0; i < vList.length; i++)
{
if(vList[i].getParent() == pID) {
vID = vList[i].getID();
if(pTop == 1) {
if (JSGantt.isIE()) { // IE;
if( JSGantt.findObj('group_'+pID).innerText == '>') {
JSGantt.findObj('child_'+vID).style.display = "";
JSGantt.findObj('childgrid_'+vID).style.display = "";
}
} else {
if( JSGantt.findObj('group_'+pID).textContent == '>') {
JSGantt.findObj('child_'+vID).style.display = "";
JSGantt.findObj('childgrid_'+vID).style.display = "";
}
}
} else {
if (JSGantt.isIE()) { // IE;
if( JSGantt.findObj('group_'+pID).innerText == ' v') {
JSGantt.findObj('child_'+vID).style.display = "";
JSGantt.findObj('childgrid_'+vID).style.display = "";
}
} else {
if( JSGantt.findObj('group_'+pID).textContent == 'v') {
JSGantt.findObj('child_'+vID).style.display = "";
JSGantt.findObj('childgrid_'+vID).style.display = "";
}
}
}
if(vList[i].getGroup() == 1)
JSGantt.show(vID, 0,ganttObj);
}
}
}
// function to open window to display task link
JSGantt.taskLink = function(pRef)
{
if(pRef && pRef != '')
var OpenWindow=window.open(pRef, "newwin", "height=400,width=600");
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -