1. 程式人生 > >jQuery甘特圖/日程圖/橫道圖/外掛

jQuery甘特圖/日程圖/橫道圖/外掛

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

&n