jQueryに慣れるため、ganttViewをカスタマイズしてみた
Help me, hackers!で、jQueryのガントチャートライブラリをドラッグ＆ドロップとリサイズできるようにカスタマイズしたjquery.ganttViewが、『ガントチャートライブラリにタスクの依存関係の機能を追加したい』というページにありました。私は、これをベースに少しカスタマイズしてみました。
ダウンロード
[修正:7/11 3:57]
0.0.2に更新しました。[id:nkmrshn:20100711]
カスタマイズ部分
リサイズ後の工数
リサイズした後、工数の表示が固定化されていたので、セルの大きさに併せて自動的に修正するようにしました。ただし、series連想配列内に「text」があった場合は、ツールチップの方だけ修正します。
読み取り専用の列
series連想配列内に、「readOnly」を追加しました。それにより、「readOnly: true」と書けば、その列はドラッグ＆ドロップやリサイズができないようになります。
{id: 4, name: "タスク4", series: [{name: "担当者4", start: new Date(2010,00,02), end: new Date(2010,00,08), readOnly: true}]}
/* 読み取り専用のブロック */ div.ganttview-block.ganttview-readOnly { background-color: #f5f5f5; }
土日は工数に含めない
ganttViewを初期化する際、「excludeWeekends: true」を設定しておくと、土日は工数に含めず表示するようにしました。
が...すみません。8時間ほどドツボにはまって出来たしろものなので、きちんと計算されない場合があるかもしれません。正確な開始日と終了日を取得するのに時間がかかりました。jQueryがresizableで付与するCSSのpositionとtopを削除し、leftを0pxで初期化するのがミソでした。
$("#ganttChart").ganttView({ data: ganttData, cellWidth: cw, start: new Date(2010,00,01), end: new Date(2010,05,15), slideWidth: 500, excludeWeekends: true, change: function(o,s,m) { console.log("ID: %o", o.data('block-data').id); } });
土日に色を付ける
土日に色を付けられるよう、divタグのclass属性に独自のクラス名を出力するようにしました。
/* 土曜日ヘッダ */ div.ganttview-hzheader-day.ganttview-saturday { background-color: #f0f8ff; } /* 日曜日ヘッダ */ div.ganttview-hzheader-day.ganttview-sunday { background-color: #ffe4e1; } /* 土曜日・行グリッド */ div.ganttview-grid-row-cell.ganttview-saturday { background-color: #f0f8ff; } /* 日曜日・行グリッド */ div.ganttview-grid-row-cell.ganttview-sunday { background-color: #ffe4e1; }
