基於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版本暫不支持高版本
- 圖表上所有樣式可自定義或取消