甘特图

最新推荐文章于 2023-07-11 16:43:14 发布

原创最新推荐文章于 2023-07-11 16:43:14 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #UI #项目管理 #ViewUI

jQuery 专栏收录该内容

3 篇文章

订阅专栏

项目进度管理最直观的展现就是甘特图，最近项目需求要在网页中安排任务，管理进度等，故研究了一下甘特图，在网上找到一个关于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 中。