甘特图
项目进度管理最直观的展现就是甘特图，最近项目需求要在网页中安排任务，管理进度等，故研究了一下甘特图，在网上找到一个关于jQuery做甘特图的插件，写的非常好。
具体地址如下：http://github.com/thegrubbsian/jquery.ganttView
不过该甘特图插件没有现成编辑功能，故有找到一个改版：
http://github.com/nkmrshn/jquery.ganttView
改版后的甘特图可以编辑功能，效果图如下：
具体使用方法如下：
1. 下载文件，目录结果如下：
/example /lib jquery.ganttView.js jquery.ganttView.css
2. 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Gantt</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="example.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../jquery.ganttView.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../lib/flick/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="../lib/date.js"></script>
<script type="text/javascript" src="../lib/holidays.js"></script>
<script type="text/javascript" src="../jquery.ganttView.js"></script>
<script type="text/javascript">
$(function () {
var ganttData = [
{id: 1, name: "タスク1", series: [
{id: 1, name: "担当者1", text: "Test1-1", start: new Date(2010,00,02), end: new Date(2010,00,05), readOnly: true},
{id: 2, name: "担当者2", text: "Test1-2", start: new Date(2010,00,02), end: new Date(2010,00,05)}
]},
{id: 2, name: "タスク2", series: [{id: 3, name: "担当者2", text: "Test2", start: new Date(2010,00,05), end: new Date(2010,00,08)}]},
{id: 3, name: "タスク3", series: [{id: 4, name: "担当者3", start: new Date(2010,00,09), end: new Date(2010,00,12)}]},
{id: 4, name: "タスク4", series: [{id: 5, name: "担当者4", start: new Date(2010,00,02), end: new Date(2010,00,08), readOnly: true}]},
{id: 5, name: "タスク5", series: [{id: 6, name: "担当者5", start: new Date(2010,00,08), end: new Date(2010,00,15)}]}
];
var selectedObj = null;
$("#ganttChart").ganttView({
showWeekends: true,
data: ganttData,
cellWidth: 21,
start: new Date(2010,00,01),
end: new Date(2010,05,15),
slideWidth: 600,
excludeWeekends: true,
showDayOfWeek: true,
showHolidays: true,
excludeHolidays: 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);
},
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");
}
});
$('#ganttData-add').click(function () {
var name = $('#ganttData-series-name').val();
name = (name == "") ? null : name;
var text = $('#ganttData-series-text').val();
text = (text == "") ? null : text;
var start = $('#ganttData-series-start').val().split("/");
var end = $('#ganttData-series-end').val().split("/");
var data = [{
id: parseInt($('#ganttData-item-id').val()),
name: $('#ganttData-item-name').val(),
series: [{
id: parseInt($('#ganttData-series-id').val()),
name: name,
text: text,
start: new Date(start[0], parseInt(start[1]) - 1, start[2]),
end: new Date(end[0], parseInt(end[1]) - 1, end[2]),
}]
}];
$().ganttView.addData(data);
});
$('#ganttData-refresh').click(function () {
if (selectedObj == null) { return; }
var data = selectedObj.data('block-data');
data.itemName = $('#ganttData-item-name').val();
data.seriesName = $('#ganttData-series-name').val();
var start = $("#ganttData-series-start").val().split("/");
data.start = new Date(start[0], parseInt(start[1]) - 1, start[2]);
var end = $("#ganttData-series-end").val().split("/");
data.end = new Date(end[0], parseInt(end[1]) - 1, end[2]);
data.text = $('#ganttData-series-text').val();
selectedObj.refreshGanttData();
});
$('#ganttData-delete').click(function () {
if (selectedObj == null) { return; }
selectedObj.deleteGanttData(selectedObj);
$('#ganttData-reset').trigger("click");
});
$('#ganttData-reset').click(function () {
selectedObj = null;
$('.ganttData-input input').val("");
});
});
</script>
</head>
<body>
<div id="ganttChart"></div>
<br/>
<div id="ganttData">
<div class="ganttData-item">
<div class="ganttData-header">Item ID</div>
<div class="ganttData-input"><input type="text" id="ganttData-item-id" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">Item Name</div>
<div class="ganttData-input"><input type="text" id="ganttData-item-name" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">Series ID</div>
<div class="ganttData-input"><input type="text" id="ganttData-series-id" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">Series Name</div>
<div class="ganttData-input"><input type="text" id="ganttData-series-name" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">Start</div>
<div class="ganttData-input"><input type="text" id="ganttData-series-start" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">End</div>
<div class="ganttData-input"><input type="text" id="ganttData-series-end" /></div>
</div>
<div class="ganttData-item">
<div class="ganttData-header">Series Text</div>
<div class="ganttData-input"><input type="text" id="ganttData-series-text" /></div>
</div>
<div class="ganttData-item">
<input type="button" id="ganttData-reset" value="リセット" />
<input type="button" id="ganttData-add" value="追加" />
<input type="button" id="ganttData-refresh" value="更新" />
<input type="button" id="ganttData-delete" value="削除" />
</div>
</div>
</body>
</html>
以上代码在/example/index.html 中。